Vue表單提交點擊事件只允許點擊一次的實例
常用出現(xiàn)場景：商城點擊訂單提交
1、使用Vue封裝事件
body：
<template> <div> <el-button @click.once='submitOrder()'>提交訂單</el-button> </div></template>
方法：
methods: { submitOrder() { // 處理邏輯 }}
2、使用原生JS事件
在數(shù)據(jù)data里面聲明一個flag屬性
data() { return { isSubmit: true; }}
body:
<template> <div> <el-button @click='submitOrder()'>提交訂單</el-button> </div></template>
方法：
methods: { submitOrder() { if (this.isSubmit) { this.isSubmit = false; // 處理邏輯 } }}
補充知識：表單驗證提交內(nèi)容不能為空的幾種方法
方法一：
使用css的required屬性
<input type='' required='required' name='' id='' value='' />
方法二：
使用JS代碼示例，注意事項：form要加上onSubmit事件，form.xx.vlaue要在表單中對應(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位，請重新輸入！’);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' 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='注冊' type='submit'> <input type='reset' value='重置'></td></tr> </table> </form></fieldset>
方法三：
使用jQuery方法（通過class驗證），需要引用jquery.min.js
優(yōu)勢：
1：為input添加class，名字可以隨意設(shè)置，但每個input需要保持一致，本章案例calss設(shè)置為noNull。（若input已有class屬性，可直接加到其后）
2：為input添加一個屬性，用來后期通過jquery獲取該字段，用作提示語。本章案例提示屬性為notNull。
3：通過jQuery遍歷頁面中所有calss為noNull的表單，驗證其是否為空，若為空，通過獲取notNull的字段，進行為空提示。
具體如何設(shè)置，請參照下面的案例。
<!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' notNull='性別'> 女<input type='radio' name='sex' value='1' > </div> <br> <!-- select --> <div>年齡：<select name='age' 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' notNull='興趣'>唱歌<input type='checkbox' name='hobby' value='2'>跳舞<input type='checkbox' name='hobby' value='3'> </div> <br> <button type='button' onclick='bubmi()'>保存</button> </form><script src='http://m.propowerdrill.cn/bcjs/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表單提交點擊事件只允許點擊一次的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 使用ajax跨域調(diào)用springboot框架的api傳輸文件2. ASP.NET MVC把數(shù)據(jù)庫中枚舉項的數(shù)字轉(zhuǎn)換成文字3. 通過python調(diào)用adb命令對App進行性能測試方式4. python 實現(xiàn)mysql自動增刪分區(qū)的方法5. Python查詢oracle數(shù)據(jù)庫速度慢的解決方案6. Python matplotlib畫圖時圖例說明(legend)放到圖像外側(cè)詳解7. python新手學(xué)習(xí)可變和不可變對象8. PHP實現(xiàn)圖片旋轉(zhuǎn)的方法詳解9. vue中關(guān)于checkbox使用的問題10. idea右鍵沒有java class選項問題解決方案
網(wǎng)公網(wǎng)安備