前言：jQuery.validator是一款非常不錯的表單驗證插件，驗證方式非常簡單方便，它還對HTML5做了兼容處理，了解了驗證規則，就基本掌握了它的使用，下面就讓我一一道來 jQuery.validator 驗證規則
一、在元素的class屬性中添加需要驗證的規則，多個規則以空格隔開
<label>郵箱：</label> <input class="required email" type="text" name="email">
required: // 必填 email: // 郵箱地址 url: // url地址 date: // 日期 dateISO: // ISO格式的日期(2014/08/27 或 2014-08-27) number: // 數字(負數，正數，小數，整數) digits: // 正整數 creditcard: // 信用卡
二、將要驗證的規則作為元素的屬性
<label for="userName">用戶名：</label> <input name="userName" id="userName" required remote="ajax requestUrl"> <label for="password1">密碼：</label> <input type="password" name="password1" id="password1" required rangelength="6,12"> <label for="password2">請再次輸入密碼：</label> <input type="password" name="password2" id="password2" required equalTo="#password1">
required: // 必填
email: // 郵箱地址
url: // url地址
date: // 日期
dateISO: // ISO格式的日期(2014/08/27 或 2014-08-27)
number: // 數字(負數，正數，小數，整數)
digits: // 正整數
creditcard: // 信用卡
minlength: // 輸入字符最小長度(中文算一個字符)
maxlength: // 輸入字符最大長度(中文算一個字符)
rangelength: // 輸入字符最小，最大長度(中文算一個字符)
min: // 數值最小值
max: // 數值最大值
range: // 數值最小，最大值
equalTo: // 再次輸入相同的值
remote: // 發送ajax請求驗證(常用案例就是在注冊時，驗證用戶名是否存在)，
// 注：請求返回的 response === true || response === 'true'，才算驗證通過，這需要后端的配合
jQuery.validator內部做了很多處理，下面寫法都是可以的
<input type="password" name="password1" id="password1" required rangelength="6,12"> <input type="password" name="password1" id="password1" required="" rangelength="6, 12"> <input type="password" name="password1" id="password1" required rangelength="6 12"> <input type="password" name="password1" id="password1" required="true" rangelength="[6,12]">
同時還支持HTML5的type屬性，如：
<input type="url" name="url" required> <input type="number" name="number" required> <input type="email" name="email" required>
注意：不支持 type="range" 的 input 控件，這是因為需要比較最大，最小值，而不只是簡單的正則驗證
三、使用jQuery.fn.data設置驗證規則
<input type="text" name="userName">
$('[name="userName"]').data({
'ruleRequired': true,
'ruleRangelength': [4, 10],
'ruleRemote': 'ajax requestUrl'
});
注意：下面寫法是不會生效的，因為元素屬性都是小寫字母，大寫字母都會轉換為小寫
<input type="text" name="userName" data-ruleRequired="true" data-ruleRangelength="4,10" data-ruleRemote="">
四、在配置對象中，傳遞要驗證的規則
<form id="validForm">
<input type="text" name="userName">
<input type="text" name="email">
<input type="submit" value="提交">
</form>
$('#validForm').validate({
// 每一個name值對應一組規則
userName: {
required: true,
rangelength: [4,10],
remote: '' // ajax請求地址
},
email: {
required: true,
email: true
}
});
五、自定義驗證規則
使用 $.validator.addMethod( name, method, message )， 便可以添加自定義規則
如：我要自定義一條驗證手機號碼的規則：
$.validator.addMethod('mobile', function( value, element ){
// /^1\d{10}$/ 來自支付寶的正則
return this.optional( element ) || /^1\d{10}$/.test( value );
}, '請輸入正確的手機號碼');
六、其他( 處理頻繁請求ajax的操作 )
情景1：關注與取消關注，這種需求需要處理連續 多個ajax請求的關系
我之前的處理是上一個ajax請求完畢了，才去響應用戶的下一次單擊操作，即再次發送ajax請求
情景2：jQuery.validator源碼中的例子
如果驗證規則是 remote ，發送ajax請求驗證，由於插件在keyUp事件中會觸發驗證，那么當keyUp頻繁的觸發，ajax就會請求很多很多次啦，這就涉及到處理連續多個ajax請求的問題，
即：上一次ajax請求還沒完成，緊接着又發送ajax請求，這樣是不是有點凌亂呢，jQuery.validator是這樣做的，將上一次未響應的ajax請求中斷，這樣只會在最后一次keyUp事件中發送ajax驗證
比較：想想情景1的例子，第二種處理方式更好，因為情景1的處理，可能會在最后一次單擊事件無響應，不會觸發ajax請求，造成用戶體驗不好，這是因為在最后一次單擊事件中，上一次ajax請求還未完成(響應)
PS：
jQuery.validator有四種為表單控件添加驗證規則的方式，其內部實現是按 class, attribute, jQuery.fn.data, 配置對象依次疊加的，后面途徑添加的規則會覆蓋前面添加的規則；
如果有多個表單控件的name屬性值相同(屬性值包含'')，除第一個表單控件會驗證，后面name屬性值相同的表單控件驗證將會忽略；
本篇只是研究jQuery.validator的驗證規則，其他的放在后面講述，如果你覺得本文對你有用，請豎起你的大拇指，轉載請注明出處：博客園 華子yjh ，謝謝！