jQuery Validate検証フレームワークの詳細

17832 ワード
jQuery Validateプラグインはフォームに強力な検証機能を提供し、クライアントフォームの検証をより簡単にすると同時に、アプリケーションのさまざまなニーズを満たすために多くのカスタマイズオプションを提供します.
一、jsライブラリのインポート

:Webプロジェクトのルートパスを します.
、デフォルト 
(1)required:true                   
(2)remote:"remote-valid.jsp"     ajax    remote-valid.jsp     
(3)email:true                               
(4)url:true                               
(5)date:true                              ，    ie6  ，  
(6)dateISO:true                           (ISO)，  ：2009-06-23，1998/01/22      ，      
(7)number:true                          (  ，  )
(8)digits:true                       
(9)creditcard:true                        
(10)equalTo:"#password"              #password  
(11)accept:                                 （       ）
(12)maxlength:5                       5    (       )
(13)minlength:10                      10    (       )
(14)rangelength:[5,10]                  5   10       ")(       )
(15)range:[5,10]                       5   10   
(16)max:5                             5
(17)min:10                            10

、デフォルトのヒント
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein gmltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

が な は、jsコードに の を します.
$.extend($.validator.messages, {
    required: "    ",
    remote: "      ",
    email: "            ",
    url: "        ",
    date: "        ",
    dateISO: "         (ISO).",
    number: "        ",
    digits: "      ",
    creditcard: "          ",
    equalTo: "         ",
    accept: "              ",
    maxlength: $.validator.format("           {0}     "),
    minlength: $.validator.format("           {0}     "),
    rangelength: $.validator.format("          {0}   {1}       "),
    range: $.validator.format("        {0}   {1}     "),
    max: $.validator.format("         {0}   "),
    min: $.validator.format("         {0}   ")
});

このファイルをmessages_に する を します.cn.jsでは、ページに

、
1、metadata 、 をコントロールに く





    
        

        jQuery Validate      -metadata  

        
        
        
        
        
        
        
        
        
        
        $(function(){
            $("#myform").validate();
        });

注意:class="{}"の方法を使用するには、パッケージを導入する必要があります:jquery.metadata.js;提示内容を修正するには、以下の方法を用いることができる:class="{required:true,minlength:5,messages:{required:' '}}";equalToキーワードを使用する場合は、後の内容に引用符を付けなければなりません.次のコード:class="{required:true,minlength:5,equalTo:'#password'}"です.
2、検査規則をjsコードに書く





    
        

        jQuery Validate      

        
        
        
        
        
        
        
        
        $(function(){
            var validate = $("#myform").validate({
                debug: true, //      submit          
                //errorClass: "label.error", //          ：error   
                focusInvalid: false, //  false ，     ，        
                onkeyup: false,   
                submitHandler: function(form){   //      ,      ，     ：form   
                    alert("    ");   
                    form.submit();   //       
                },   
                
                rules:{
                    myname:{
                        required:true
                    },
                    email:{
                        required:true,
                        email:true
                    },
                    password:{
                        required:true,
                        rangelength:[3,10]
                    },
                    confirm_password:{
                        equalTo:"#password"
                    }                    
                },
                messages:{
                    myname:{
                        required:"  "
                    },
                    email:{
                        required:"  ",
                        email:"E-Mail     "
                    },
                    password:{
                        required: "    ",
                        rangelength: $.format("      :{0},     :{1}。")
                    },
                    confirm_password:{
                        equalTo:"         "
                    }                                    
                }
                          
            });    
    
        });

五、常用方法及び注意問題
1、デフォルトのsubmitを他の方法で置き換える
$(function(){
   $("#signupForm").validate({
        submitHandler:function(form){
            alert("submit!");   
            form.submit();
        }    
    });
});
validateのデフォルト値は次のように設定できます.
$.validator.setDefaults({
    submitHandler: function(form) { 
        alert("submit!"); 
        form.submit(); 
    }
});

フォームを発行するには、form.submit()を使用し、$(form).submit()を使用しないでください.
2、debug、検証のみフォームを提出しない
このパラメータがtrueの場合、フォームはコミットされず、チェックのみが行われ、デバッグ時に便利です.
$(function(){
    $("#signupForm").validate({
        debug:true
    });
});

1つのページに複数のフォームがdebugに設定されている場合は、次の操作を行います.
$.validator.setDefaults({
    debug: true
})

3、ignore:一部の要素を無視して検証しないignore: ".ignore"
4、エラーメッセージ表示位置の変更errorPlacement：Callback Default:エラー情報を検証の要素の後ろに置く
エラー配置の場所を指定します.デフォルトでは、error.appendTo(element.parent());はエラー情報を検証要素の後ろに配置します.
errorPlacement: function(error, element) { 
     error.appendTo(element.parent()); 
}

≪インスタンス｜Instance｜emdw≫

    
    
    


    
        
        
    
    
        
        
    
    


     
    
        

            
            
        

    


errorPlacement: function(error, element) {
    if (element.is(":radio"))
        error.appendTo(element.parent().next().next());
    else if (element.is(":checkbox"))
        error.appendTo(element.next());
    else
        error.appendTo(element.parent().next());
}

コードの役割は、一般的ににエラー情報を表示し、radioがに表示されている場合、checkboxがコンテンツの後ろに表示されている場合です.errorClass：String Default: "error":エラーメッセージのcssクラス名を指定し、エラーメッセージのスタイルをカスタマイズできます.errorElement：String Default: "label":どんなラベルでエラーをマークしますか.デフォルトはlabelです.emに変更できます.errorContainer：Selector:検証情報を表示または非表示にすることで、エラー情報が発生した場合にコンテナ属性を表示にすることを自動的に実現でき、エラーがない場合に非表示にすることができ、あまり役に立たないerrorContainer:「#messageBox 1,#messageBox 2」errorLabelContainer：Selector:エラーメッセージを1つのコンテナに統一します.wrapper：String:どんなラベルで上のerrorElementを包みますか
通常、この3つのプロパティを同時に使用すると、1つのコンテナにすべてのエラーメッセージを表示する機能が実現され、情報がない場合に自動的に非表示になります.
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

5、エラーメッセージ表示のスタイルを変更する
エラーメッセージのスタイルを設定し、アイコン表示を追加できます.このシステムでは、チェックファイルのメンテナンスに特化したvalidation.cssのスタイルが確立されています.
input.error { border: 1px solid red; }
label.error {
    background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
    padding-left: 16px;
    padding-bottom: 2px;
    font-weight: bold;
    color: #EA5200;
}
label.checked {
    background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

6、各フィールド検証は実行関数を通過するsuccess：String,Callback
検証する要素は検証後のアクションによって、文字列が付いている場合はcssクラスとして、関数としても使用できます.
success: function(label) {
    // set   as text for IE
    label.html(" ").addClass("checked");
    //label.addClass("valid").text("Ok!")
}
"valid"を検証要素に追加し、CSSで定義したスタイル

success: "valid"

7、検証のトリガ方式の修正
以下はboolean型ですが、falseに変更しない限り、むやみに追加しないことをお勧めします.a.onsubmit :Boolean Default: true . コミット時検証falseのみを設定するには、他の方法で検証します.b.onfocusout :Boolean Default: true . フォーカスを失うのは検証です(checkboxes/radio buttonsは含まれません)c.onkeyup :Boolean Default: true . keyupで検証する.d.onclick :Boolean Default: true . checkboxesとradioクリック時に検証e.focusInvalid :Boolean Default: true . フォームをコミットすると、検証されていないフォーム(最初のフォームまたはコミット前にフォーカスを取得した検証されていないフォーム)がフォーカスされます.f.focusCleanup :Boolean Default: false . trueの場合、検証されていない要素がフォーカスを取得した場合、エラー・プロンプトが削除されます.focusInvalidとの併用を避ける
8、非同期検証remote：URL
ajax方式で検証すると、デフォルトでは現在の検証の値がリモート・アドレスにコミットされます.他の値をコミットする必要がある場合はdataオプションを使用します.
例1:
remote: "check-email.php"

例2:
remote: {
    url: "check-email.php",     //      
    type: "post",               //      
    dataType: "json",           //         
    data: {                     //      
        username: function() {
            return $("#username").val();
        }
    }
}

リモートアドレスはtrueまたはfalseしか出力できず、他の出力は出力できません.
9、カスタムチェックの追加addMethod：name, method, message
カスタム認証方法
//        
jQuery.validator.addMethod(
    "byteRangeLength", 
    function(value, element, param) {
        var length = value.length;
        for(var i = 0; i < value.length; i++){
            if(value.charCodeAt(i) > 127){
                length++;
            }
        }
        return this.optional(element) || (length >= param[0] && length <= param[1]);   
    }, 
    $.validator.format("        {0}-{1}     (      2   )")
);

//          
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "           ");
  • additional-methods.jsファイルに追加するか、jquery.validate.js追加の推奨事項は、additional-methods.jsファイル
    • に一般的に記載する.
  • messages_cn.jsファイルに追加:isZipCode: "は、中文字、英字、数字、下線のみを含むことができます.呼び出し前にadditional-methods.jsファイルへの参照を追加します.
    • 10、radioとcheckbox、selectの検証
    1.radio required        



2.checkbox required      


checkbox minlength           ,maxlength         ,rangelength:[2,3]        




3.select required     value    

 
select minlength         （    select）,maxlength          ,rangelength:[2,3]

    jQuery Validate|菜鳥教程:http://www.runoob.com/jquery/jquery-plugin-validate.html
    jQueryプラグイン--jTemplateテンプレート
    7.vueフロント構成、プラグイン、コンポーネント