前言：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:      // 信用卡

// 注意，在元素上將規則作為元素的屬性，除了 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 控制元件，這是因為需要比較最大，最小值，而不只是簡單的正則驗證

三、使用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 ，謝謝！