Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例
常用出現(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' 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方法（通過class驗(yàn)證），需要引用jquery.min.js
優(yōu)勢(shì)：
1：為input添加class，名字可以隨意設(shè)置，但每個(gè)input需要保持一致，本章案例calss設(shè)置為noNull。（若input已有class屬性，可直接加到其后）
2：為input添加一個(gè)屬性，用來后期通過jquery獲取該字段，用作提示語。本章案例提示屬性為notNull。
3：通過jQuery遍歷頁面中所有calss為noNull的表單，驗(yàn)證其是否為空，若為空，通過獲取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' notNull='性別'> 女<input type='radio' name='sex' value='1' > </div> <br> <!-- select --> <div>年齡：<select name='age' 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' 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://www.gepszalag.com/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表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Ajax對(duì)xml信息的接收和處理操作實(shí)例分析2. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐3. Ajax返回值類型與用法實(shí)例分析4. XML入門精解之結(jié)構(gòu)與語法5. 如何使用CSS3畫出一個(gè)叮當(dāng)貓6. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式7. vue跳轉(zhuǎn)頁面常用的幾種方法匯總8. python如何寫出表白程序9. Python基于os.environ從windows獲取環(huán)境變量10. 解析python 中/ 和 % 和 //（地板除）
網(wǎng)公網(wǎng)安備