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>重復密碼：<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.b3g6.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表單提交點擊事件只允許點擊一次的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. PHP laravel實現(xiàn)導出PDF功能2. Python-openpyxl表格讀取寫入的案例詳解3. JavaScript實現(xiàn)留言板實戰(zhàn)案例4. 資深程序員：給Python軟件開發(fā)測試的25個忠告！5. Python使用Selenium自動進行百度搜索的實現(xiàn)6. JS中6個對象數(shù)組去重的方法7. 使用Blazor框架實現(xiàn)在前端瀏覽器中導入和導出Excel8. ASP基礎(chǔ)知識Command對象講解9. vscode運行php報錯php?not?found解決辦法10. python中文本字符處理的簡單方法記錄
網(wǎng)公網(wǎng)安備