Vue 양식 제출 클릭 이벤트는 클릭 한 번만 허용되는 인스턴스

6013 단어 Vue양식제출클릭
상용 출현 장면: 상점 클릭 주문 제출
1. Vue 패키지 이벤트 사용
body:

<template>
 <div>
 <el-button @click.once="submitOrder()"> </el-button>
 </div>
</template>
방법:

methods: {
 submitOrder() {
 //  
 }
}
2. 원본 JS 이벤트 사용
데이터 데이터에 flag 속성을 표시합니다

data() {
 return {
 isSubmit: true;
 }
}
body:

<template>
 <div>
 <el-button @click="submitOrder()"> </el-button>
 </div>
</template>
방법:

methods: {
 submitOrder() {
 if (this.isSubmit) {
 this.isSubmit = false;
 //  
 }
 }
}
보충 지식: 표 검증 제출 내용이 비어 있을 수 없는 몇 가지 방법
방법 1:
css의required 속성 사용하기

방법 2:
JS 코드 예시 사용, 주의사항:form은 onSubmit 이벤트,form을 추가합니다.xx.폼에 대응하려면name

<script type="text/javascript">
function beforeSubmit(form){
if(form.username.value==''){
alert(' ！');
form.username.focus();
return false;
}
if(form.password.value==''){
alert(' ！');
form.password.focus();
return false;
}
if(form.password.value.length<6){
alert(' 6 ， ！');
form.password.focus();
return false;
}
if(form.password.value!=form.password2.value) {
alert(' ， ！');
form.password2.focus();
return false;
}
return true;
}
</script>

<fieldset>
  <legend> </legend>
  <form method="post" name="form" action="user.do?method=register" onSubmit="return beforeSubmit(this);">
   <table border="1" width="100%" cellspacing="0" cellpadding="0">
   <tr><td><label> ：<input type="text" name="username" value=""></label></td></tr>
   <tr><td><label>    ：<input type="password" name="password" value=""></label></td></tr>
   <tr><td><label> ：<input type="password" name="password2" value=""></label></td></tr>
   <tr><td><input value=" " type="submit"> <input type="reset" value=" "></td></tr>   
   </table>
  </form>
</fieldset>
방법 3:
jQuery 방법 (class 검증을 통해) 을 사용하려면 jquery를 참조해야 합니다.min.js
이점:
1: input에 class를 추가하면 이름은 마음대로 설정할 수 있지만 모든 input는 일치해야 합니다. 본 장의 사례calss는 noNull로 설정됩니다.(input에class 속성이 있으면 그 뒤에 바로 추가할 수 있습니다)
2: input에 속성을 추가하여 나중에 jquery를 통해 이 필드를 가져와 제시어로 사용합니다.이 장의 사례는 속성이 notNull임을 알려 줍니다.
3: jQuery를 통해 페이지의 모든calss가 noNull인 폼을 훑어보고 비어 있는지 확인합니다. 비어 있으면 notNull의 필드를 가져와서 비어 있는지 알려 줍니다.
구체적으로 어떻게 설정하는지는 아래의 사례를 참조하십시오.

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>
  <form>
      <!-- input -->
      <div>
         : <input type="text" name="name" notNull=" " class="form-control noNull"> 
      </div>
      <br>
      <!-- radio -->
      <div>
        :
        <input type="radio" name="sex" value="0" class="noNull" notNull=" ">
        <input type="radio" name="sex" value="1" >
      </div>
      <br>
      <!-- select -->
      <div>
         ：
        <select name="age" class="noNull" notNull=" ">
          <option value =""> </option>
          <option value ="1">1</option>
          <option value ="2">2</option>
        </select>
      </div>
      <br>
      <!-- checkbox -->
      <div>
         ：
         <input type="checkbox" name="hobby" value="1" class="noNull" notNull=" ">
         <input type="checkbox" name="hobby" value="2">
         <input type="checkbox" name="hobby" value="3">
      </div>
      <br>
     <button type="button" class="btn-c" onclick="bubmi()"> </button>
  </form>

<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
  $(".noNull").each(function(){
    var name = $(this).attr("name");
    if($(this).val()==""){
    alert($(this).attr('notNull')+" ");return false;
    }
    if($(this).attr("type")=="radio"){ 
      if ($("input[name='"+name+"']:checked").size() < 1){ 
        alert($(this).attr('notNull')+" !"); 
        return false; 
      } 
    }
    if($(this).attr("type")=="checkbox"){ 
      if ($('input[name="'+name+'"]:checked').size() < 1){ 
        alert($(this).attr('notNull')+" !"); 
        return false; 
      } 
    }    
  })  
}
</script>
</body>
</html>
위의 Vue 양식에서 클릭 이벤트를 제출하여 클릭 한 번만 허용하는 실례는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고 부탁드리며 많은 응원 부탁드립니다.
[프로그래머스] 징검다리 건너기 (Python)
Baekjoon 2003 Sum of numbers in Go

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage