form表单提交前进行ajax或js验证,校验不通过不提交
生活随笔
收集整理的這篇文章主要介紹了
form表单提交前进行ajax或js验证,校验不通过不提交
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在使用form表單進行提交數據前,需要進行數據的校驗->表單的校驗(如:兩次密碼輸入是否相同)+后臺數據的校驗(如:賬號是否存在),這個時候,如果哪步校驗不通過,表單將停止提交,同時避免后臺主鍵唯一的報錯。
那么,如何實現呢,首先,需要再form表單處加入οnsubmit=“return 方法名();”
第二步,寫方法,下面是我的例子,供大家參考:
<!--js普通校驗-->
function compare(){
var password = document.getElementById("password").value;var password2 = document.getElementById("password2").value;if(password!=password2){alert("兩次輸入的密碼不一致!!");return false;}
}
這時候,就遇到了問題,(我的其他文章中有js方法的詳細終止方式) ajax不是普通的js方法,不能通過return false;終止運行,如何做呢?
這時候就需要用到一點編程的思考–>我們可以定義變量來返回,發生錯誤時修改變量即可,代碼如下:
function checkDate() { var result = true; //定義返回標識$.ajax({async: false, //設置為同步type: "post",url: "/Mall/Channel/CheckChannelDate",data: { startDate: $("#PayStartTime").val() },success: function (data) {if (data != 'ok') {alert(data);result = false} }});return result; //在ajax方法外層返回true or false}
這里需要特別注意一點:因為ajax是異步的,所以按照常規的寫法,即使驗證返回了false,表單也會被submit。所以上面的 async: false, 是必須要寫的,我嘗試過不加,結果js最后才執行ajax方法,結果就不是預期你想要的那個了。
以上!如果有幫到你,點贊、評論、加關注喲!!!
總結
以上是生活随笔為你收集整理的form表单提交前进行ajax或js验证,校验不通过不提交的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 终止js程序执行的方法
- 下一篇: stream流对象的理解及使用