快捷導(dǎo)航

Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例

更新時(shí)間：2020年10月23日 09:03:20 作者：Aybuai

這篇文章主要介紹了Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

常用出現(xiàn)場(chǎng)景：商城點(diǎn)擊訂單提交

1、使用Vue封裝事件

body：

<template>
 <div>
 <el-button @click.once="submitOrder()">提交訂單</el-button>
 </div>
</template>

方法：

methods: {
 submitOrder() {
 // 處理邏輯
 }
}

2、使用原生JS事件

在數(shù)據(jù)data里面聲明一個(gè)flag屬性

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

body:

<template>
 <div>
 <el-button @click="submitOrder()">提交訂單</el-button>
 </div>
</template>

方法：

methods: {
 submitOrder() {
 if (this.isSubmit) {
 this.isSubmit = false;
 // 處理邏輯
 }
 }
}

補(bǔ)充知識(shí)：表單驗(yàn)證提交內(nèi)容不能為空的幾種方法

方法一：

使用css的required屬性

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

方法二：

使用JS代碼示例，注意事項(xiàng)：form要加上onSubmit事件，form.xx.vlaue要在表單中對(duì)應(yīng)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位，請(qǐng)重新輸入！');
form.password.focus();
return false;
}
if(form.password.value!=form.password2.value) {
alert('你兩次輸入的密碼不一致，請(qǐng)重新輸入！');
form.password2.focus();
return false;
}
return true;
}
</script>

<fieldset>
  <legend>用戶注冊(cè)</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>重復(fù)密碼：<input type="password" name="password2" value=""></label></td></tr>
   <tr><td><input value="注冊(cè)" type="submit"> <input type="reset" value="重置"></td></tr>   
   </table>
  </form>
</fieldset>

方法三：

使用jQuery方法（通過(guò)class驗(yàn)證），需要引用jquery.min.js

優(yōu)勢(shì)：

1：為input添加class，名字可以隨意設(shè)置，但每個(gè)input需要保持一致，本章案例calss設(shè)置為noNull。（若input已有class屬性，可直接加到其后）

2：為input添加一個(gè)屬性，用來(lái)后期通過(guò)jquery獲取該字段，用作提示語(yǔ)。本章案例提示屬性為notNull。

3：通過(guò)jQuery遍歷頁(yè)面中所有calss為noNull的表單，驗(yàn)證其是否為空，若為空，通過(guò)獲取notNull的字段，進(jìn)行為空提示。

具體如何設(shè)置，請(qǐng)參照下面的案例。

<!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 ="">請(qǐng)選擇</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表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: