jquery+正則實現(xiàn)統(tǒng)一的表單驗證
更新時間：2015年09月20日 10:24:37 作者：點滴
表單驗證一直很繁瑣，特別是大點的表單，如果每個input都去單獨寫驗證簡直要寫死人，最近寫了一小段js統(tǒng)一的驗證表單內(nèi)容是否正確。需要的朋友可以參考下
表單驗證一直很繁瑣，特別是大點的表單，如果每個input都去單獨寫驗證簡直要寫死人，最近寫了一小段js統(tǒng)一的驗證表單內(nèi)容是否正確。
使用這段代碼就不再需要對每個input寫格式判斷，只需要將正確格式的正則表達(dá)式寫在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屬性的標(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+正則實現(xiàn)統(tǒng)一的表單驗證，希望大家喜歡。
相關(guān)文章
jQuery刪除/清空指定元素的所有子節(jié)點實例代碼
這篇文章主要給大家介紹了關(guān)于jQuery刪除/清空指定元素的所有子節(jié)點，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了jQuery解析XML 實例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
完美兼容各大瀏覽器的jQuery仿新浪圖文淡入淡出間歇滾動特效
本文是作者學(xué)習(xí)jQuery之后練手之作，兼容各大瀏覽器，非常的精美實用，這里放出來給小伙伴們，有需要的直接拿走，別跟我客氣^_^2014-11-11
這篇文章主要為大家詳細(xì)介紹了jquery.pagination.js分頁使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
jQuery html()方法使用不了無法顯示內(nèi)容的問題
jquery中的html方法使用不了，只能用完最基本的innerHTML把內(nèi)容展示出來2014-08-08
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)簡單每周輪換的日歷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
jqeury eval將字符串轉(zhuǎn)換json的方法
這個方法是一個將DataTable轉(zhuǎn)換成字符串的方法 。2011-01-01
jQuery動態(tài)地獲取系統(tǒng)時間實現(xiàn)代碼
jquery獲取當(dāng)前年份、獲取當(dāng)前月份（0——11），具體思路及代碼如下，感興趣的朋友可以參考下哈，希望可以幫助到你2013-05-05
jQuery實現(xiàn)圣誕節(jié)禮物動畫案例解析
這篇文章主要介紹了jQuery實現(xiàn)圣誕節(jié)禮物動畫案例解析的相關(guān)資料,需要的朋友可以參考下2016-12-12
Jquery中的CheckBox、RadioButton、DropDownList的取值賦值實現(xiàn)代碼
隨著Jquery的作用越來越大，使用的朋友也越來越多。在Web中，由于CheckBox、 Radiobutton 、 DropDownList等控件使用的頻率比較高，就關(guān)系到這些控件在Jquery中的操作問題2011-10-10