jquery+正則實現(xiàn)統(tǒng)一的表單驗證
更新時間:2015年09月20日 10:24:37 作者:點滴
表單驗證一直很繁瑣,特別是大點的表單,如果每個input都去單獨寫驗證簡直要寫死人,最近寫了一小段js統(tǒng)一的驗證表單內(nèi)容是否正確。需要的朋友可以參考下
表單驗證一直很繁瑣,特別是大點的表單,如果每個input都去單獨寫驗證簡直要寫死人,最近寫了一小段js統(tǒng)一的驗證表單內(nèi)容是否正確。
使用這段代碼就不再需要對每個input寫格式判斷,只需要將正確格式的正則表達式寫在datatype里就可以了,提交表單按鈕也只需要綁定checkForm函數(shù)就可以了。
大家有什么建議可以評論一下
<input type="text" datatype=“正則”/> //表單驗證 //點擊下一步事件 function checkForm(form){ var success = true; $("."+form+" input").each(function(){ var $that = $(this); var dataType = eval($that.attr("dataType")); if(dataType!=undefined){ if($that.val().match(dataType)){ $that.removeClass("borderRed"); }else{ $that.focus(); $that.addClass("borderRed"); success = false; return false; } } }) return success; } //給每個帶有datatype屬性的標簽綁定blur focus事件 $(document).on("blur","input",function(){ var $that = $(this); var dataType = eval($that.attr("dataType")); if(dataType!=undefined){ if($that.val().match(dataType)){ $that.removeClass("borderRed"); }else{ $that.addClass("borderRed"); } } }) $(document).on("focus","input",function(){ $(this).removeClass("borderRed"); });
以上內(nèi)容給大家分享了jquery+正則實現(xiàn)統(tǒng)一的表單驗證,希望大家喜歡。
相關(guān)文章
BootStrap中jQuery插件Carousel實現(xiàn)輪播廣告效果
輪播廣告在網(wǎng)站中的應(yīng)用實在是太常見了,下面說一說怎樣使用bootstrap中的Carousel插件來實現(xiàn)輪播廣告效果,感興趣的朋友一起看看吧2017-03-03form表單只提交數(shù)據(jù)而不進行頁面跳轉(zhuǎn)的解決方案
將數(shù)據(jù)提交到saveReport(form的action指向)頁面,但是頁面又不進行跳轉(zhuǎn),即保持當(dāng)前頁面不變呢?利用jquery的ajaxSubmit函數(shù)以及form的onsubmit函數(shù)完成2013-09-09