常用出現場景:商城點擊訂單提交
1、使用Vue封裝事件
body:
提交訂單
方法:
methods: { submitOrder() { // 處理邏輯 } }
2、使用原生JS事件
在數據data里面聲明一個flag屬性
data() { return { isSubmit: true; } }
body:
提交訂單
方法:
methods: { submitOrder() { if (this.isSubmit) { this.isSubmit = false; // 處理邏輯 } } }
補充知識:表單驗證提交內容不能為空的幾種方法
方法一:
使用css的屬性
方法二:
使用JS代碼示例,注意事項:form要加上事件,form.xx.vlaue要在表單中對應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>
方法三:
使用方法(通過class驗證)表單驗證不能為空,需要引用.min.js
優勢:
1:為input添加class,名字可以隨意設置,但每個input需要保持一致,本章案例calss設置為。(若input已有class屬性,可直接加到其后)
2:為input添加一個屬性表單驗證不能為空,用來后期通過獲取該字段,用作提示語。本章案例提示屬性為。
3:通過遍歷頁面中所有calss為的表單,驗證其是否為空,若為空,通過獲取的字段,進行為空提示。
具體如何設置,請參照下面的案例。
<script src="jquery-1.9.1.min.js"></script>
以上這篇Vue表單提交點擊事件只允許點擊一次的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持云海天教程。
原文鏈接: