## 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: // 信用卡 // 注意，在元素上將規則作為元素的屬性，除了 required ，以上規則都需要賦值，如：<input type="text" id="email" name="email" email="true"> 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 控件，這是因為需要比較最大，最小值，而不只是簡單的正則驗證 * * * * * ## 四、在配置對象中，傳遞要驗證的規則 ~~~ <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屬性值相同的表單控件驗證將會忽略；