jQuery.validator検証ルールの詳細

前言:jQuery.validatorは非常に良いフォーム検証プラグインで、検証方式は非常に簡単で便利で、HTML 5に対して互換処理をして、検証規則を理解して、基本的にその使用を掌握して、次は私に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]">

 
HTML 5の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リクエストがトリガーされず、ユーザー体験が悪いため、シナリオ1の処理がより良い.これは、最後のクリックイベントで前回のajaxリクエストがまだ完了していないためである.
 
PS:jQuery.validatorには4つのフォームコントロールに検証ルールを追加する方法があり、その内部実装はclass,attribute,jQuery.fn.Dataは、構成オブジェクトが順次重畳され、後のパスで追加されたルールが前に追加されたルールを上書きします.複数のフォームコントロールのname属性値が同じ(属性値に')場合、最初のフォームコントロールを除いて検証され、後のname属性値が同じフォームコントロール検証は無視されます.
本編はただjQuery.を研究するだけです.validatorの検証ルールは、他のものは後で説明します.もし本文があなたに役に立つと思ったら、親指を立てて、転載して出典を明記してください.ブログ園華子yjh、ありがとうございます.