【表單驗證插件】 jQuery.validator 驗證規則詳解

前言：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請求還未完成(響應)

給心靈一個純淨空間，讓思想，情感，飛揚！