jQuery.validator 驗證規則詳解

前言：jQuery.validator是一款很是不錯的表單驗證插件，驗證方式很是簡單方便，它還對HTML5作了兼容處理，瞭解了驗證規則，就基本掌握了它的使用，下面就讓我一一道來 jQuery.validator 驗證規則

1、在元素的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:      // 信用卡

 

2、將要驗證的規則做爲元素的屬性

<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 控件，這是由於須要比較最大，最小值，而不僅是簡單的正則驗證

 

3、使用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="">

 

4、在配置對象中，傳遞要驗證的規則

<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
    }
});

 

5、自定義驗證規則

使用 $.validator.addMethod( name, method, message )， 即可以添加自定義規則
如：我要自定義一條驗證手機號碼的規則：

$.validator.addMethod('mobile', function( value, element ){

    // /^1\d{10}$/ 來自支付寶的正則
    return this.optional( element ) || /^1\d{10}$/.test( value );

}, '請輸入正確的手機號碼');

 

6、其餘( 處理頻繁請求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 ，謝謝！