jquery+正則實(shí)現(xiàn)統(tǒng)一的表單驗(yàn)證
表單驗(yàn)證一直很繁瑣,特別是大點(diǎn)的表單,如果每個(gè)input都去單獨(dú)寫驗(yàn)證簡(jiǎn)直要寫死人,最近寫了一小段js統(tǒng)一的驗(yàn)證表單內(nèi)容是否正確。
使用這段代碼就不再需要對(duì)每個(gè)input寫格式判斷,只需要將正確格式的正則表達(dá)式寫在datatype里就可以了,提交表單按鈕也只需要綁定checkForm函數(shù)就可以了。
大家有什么建議可以評(píng)論一下
<input type="text" datatype=“正則”/> //表單驗(yàn)證 //點(diǎn)擊下一步事件 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; } //給每個(gè)帶有datatype屬性的標(biāo)簽綁定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+正則實(shí)現(xiàn)統(tǒng)一的表單驗(yàn)證,希望大家喜歡。
相關(guān)文章
jQuery實(shí)現(xiàn)的頁面彈幕效果【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的頁面彈幕效果,涉及jQuery事件響應(yīng)與頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08BootStrap中jQuery插件Carousel實(shí)現(xiàn)輪播廣告效果
輪播廣告在網(wǎng)站中的應(yīng)用實(shí)在是太常見了,下面說一說怎樣使用bootstrap中的Carousel插件來實(shí)現(xiàn)輪播廣告效果,感興趣的朋友一起看看吧2017-03-03JQuery validate 驗(yàn)證一個(gè)單獨(dú)的表單元素實(shí)例
下面小編就為大家?guī)硪黄狫Query validate 驗(yàn)證一個(gè)單獨(dú)的表單元素實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02form表單只提交數(shù)據(jù)而不進(jìn)行頁面跳轉(zhuǎn)的解決方案
將數(shù)據(jù)提交到saveReport(form的action指向)頁面,但是頁面又不進(jìn)行跳轉(zhuǎn),即保持當(dāng)前頁面不變呢?利用jquery的ajaxSubmit函數(shù)以及form的onsubmit函數(shù)完成2013-09-09