Of Stack

Vue Form Submission Click Event allows only one click instances

  • 2021-09-04 23:08:58
  • OfStack

Commonly used scenarios: Click on the order submission in the mall

1. Use Vue to encapsulate events

body: 


<template>
 <div>
 <el-button @click.once="submitOrder()"> Submit an order </el-button>
 </div>
</template>

Methods: 


methods: {
 submitOrder() {
 //  Processing logic 
 }
}

2. Use native JS events

Declare an flag attribute in the data data 


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

body: 


<template>
 <div>
 <el-button @click="submitOrder()"> Submit an order </el-button>
 </div>
</template>

Methods: 


methods: {
 submitOrder() {
 if (this.isSubmit) {
 this.isSubmit = false;
 //  Processing logic 
 }
 }
}

Supplementary knowledge: Several methods for the form to verify that the submitted content cannot be empty

Method 1:

Use the required property of css

< input type="" required="required" name="" id="" value="" / >

Method 2:

Using the JS code example, note: form should be added with onSubmit event, and form. xx. vlaue should correspond to name in the form 


<script type="text/javascript">
function beforeSubmit(form){
if(form.username.value==''){
alert(' User name cannot be empty! ');
form.username.focus();
return false;
}
if(form.password.value==''){
alert(' Password cannot be empty! ');
form.password.focus();
return false;
}
if(form.password.value.length<6){
alert(' The password is at least 6 Bit, please re-enter! ');
form.password.focus();
return false;
}
if(form.password.value!=form.password2.value) {
alert(' Did you enter the password twice 1 To, please re-enter! ');
form.password2.focus();
return false;
}
return true;
}
</script>

<fieldset>
  <legend> User registration </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> User name: <input type="text" name="username" value=""></label></td></tr>
   <tr><td><label> Dense    Code: <input type="password" name="password" value=""></label></td></tr>
   <tr><td><label> Duplicate password: <input type="password" name="password2" value=""></label></td></tr>
   <tr><td><input value=" Registration " type="submit"> <input type="reset" value=" Reset "></td></tr>   
   </table>
  </form>
</fieldset>

Method 3:

Using the jQuery method (validated by class), you need to reference jquery. min. js

Advantages:

1: Add class to input. The name can be set at will, but each input needs to be kept at 1. In this chapter, calss is set to noNull. (If input already has class attribute, it can be added directly after it)

2: Add an attribute to input to get this field later through jquery as a prompt. The case hint attribute in this chapter is notNull.

3: Through jQuery traverse all calss noNull form in the page, verify whether it is empty, if it is empty, by obtaining the field of notNull, carry out empty prompt.

Please refer to the following case for details. 


<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>
  <form>
      <!-- input -->
      <div>
         Name : <input type="text" name="name" notNull=" Name " class="form-control noNull"> 
      </div>
      <br>
      <!-- radio -->
      <div>
        Gender :
        Male <input type="radio" name="sex" value="0" class="noNull" notNull=" Gender ">
        Female <input type="radio" name="sex" value="1" >
      </div>
      <br>
      <!-- select -->
      <div>
         Age: 
        <select name="age" class="noNull" notNull=" Age ">
          <option value =""> Please select </option>
          <option value ="1">1</option>
          <option value ="2">2</option>
        </select>
      </div>
      <br>
      <!-- checkbox -->
      <div>
         Interests: 
         Play ball <input type="checkbox" name="hobby" value="1" class="noNull" notNull=" Interest ">
         Singing <input type="checkbox" name="hobby" value="2">
         Dance <input type="checkbox" name="hobby" value="3">
      </div>
      <br>
     <button type="button" class="btn-c" onclick="bubmi()"> Save </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')+" Cannot be empty ");return false;
    }
    if($(this).attr("type")=="radio"){ 
      if ($("input[name='"+name+"']:checked").size() < 1){ 
        alert($(this).attr('notNull')+" Cannot be empty !"); 
        return false; 
      } 
    }
    if($(this).attr("type")=="checkbox"){ 
      if ($('input[name="'+name+'"]:checked').size() < 1){ 
        alert($(this).attr('notNull')+" Cannot be empty !"); 
        return false; 
      } 
    }    
  })  
}
</script>
</body>
</html>
Related articles: