jQuery.validate詳細

14665 ワード
jQuery.validate詳細
作者：氷羽  原文の住所:http://blog.sina.com.cn/s/blog_608475 eb 0100 h 3 h 1.
一、jsライブラリの導入
<script src="../js/jquery.js" type="text/javascript"></script>
 <script src="../js/jquery.validate.js" type="text/javascript"></script>
二、標準検証ルール
（1）required：true               必須フィールド(2)remote:「check.php」          ajaxメソッドを使ってcheck.phpを呼び出して入力値(3)email:trueを検証します。                  正しいフォーマットのメールを入力しなければなりません(4)url:true                    正しいフォーマットのURL(5)を入力しなければなりません。                   正しいフォーマットの日付を入力しなければならないので、エラーが発生しました。                正しいフォーマットの日付（ISO）を入力しなければなりません。例えば、2009-06-23、1998/01/22検証フォーマットのみで、有効性を検証しません。（7）number:true                 合法的な数字(マイナス、小数)(8)digits:trueを入力しなければなりません。                 整数(9)credicardを入力しなければなりません:                 合法的なクレジットカード番号（10）equalToを入力しなければなりません。           入力値は、(11)acceptと同じでなければなりません。                    合法的な接尾辞名を持つ文字列(アップロードファイルのサフィックス)(12)maxlength:5を入力します。                入力長は最大5の文字列（漢字は1文字とします）（13）minlength：10               入力長さが最小で10の文字列(漢字は1文字として計算します)(14)ragenegth:[5,10]         入力長さは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 g ltiges 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コードに追加できます。
jQuery.extend(jQuery.validator.messages, {         required: "    ",   remote: "      ",   email: "            ",   url: "        ",   date: "        ",   dateISO: "         (ISO).",   number: "        ",   digits: "      ",   creditcard: "          ",   equalTo: "         ",   accept: "              ",   maxlength: jQuery.validator.format("            {0}     "),   minlength: jQuery.validator.format("            {0}     "),   rangelength: jQuery.validator.format("           {0}   {1}       "),   range: jQuery.validator.format("        {0}   {1}     "),   max: jQuery.validator.format("        {0}   "),   min: jQuery.validator.format("        {0}   ") });
    ，      messages_cn.js ，       <script src="../js/messages_cn.js" type="text/javascript"></script>
 、    
1.          
 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> <script src="./js/jquery.metadata.js" type="text/javascript"></script>
$().ready(function() {  $("#signupForm").validate(); });
 <form id="signupForm" method="get" action="">     <p>         <label for="firstname">Firstname</label>         <input id="firstname" name="firstname" />     </p>  <p>   <label for="email">E-Mail</label>   <input id="email" name="email" class="required email" />  </p>  <p>   <label for="password">Password</label>   <input id="password" name="password" type="password" class="{required:true,minlength:5}" />  </p>  <p>   <label for="confirm_password">    </label>   <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />  </p>     <p>         <input type="submit" value="Submit"/>     </p> </form>
class=「{}」を使う方式で、カバンを紹介しなければなりません。jquery.metadata.js
以下の方法を使用して、ヒント内容を修正してもいいです。class=「{required:true，minlength:5，messages:{required:''内容を入力してください'}」
equalToのキーワードを使う時、後の内容は引用符を付けなければなりません。コード：class="
 
 
2.検査規則をjsコードに記入する
$().ready(function() {  $("#signupForm").validate({         rules: {    firstname: "required",    email: {     required: true,     email: true    },    password: {     required: true,     minlength: 5    },    confirm_password: {     required: true,     minlength: 5,     equalTo: "#password"    }   },         messages: {    firstname: "     ",    email: {     required: "   Email  ",     email: "      email  "    },    password: {     required: "     ",     minlength: jQuery.format("      {0}    ")    },    confirm_password: {     required: "       ",     minlength: "        5   ",     equalTo: "            "    }   }     }); });
//messages ，        message，        
 <form id="signupForm" method="get" action="">     <p>         <label for="firstname">Firstname</label>         <input id="firstname" name="firstname" />     </p>  <p>   <label for="email">E-Mail</label>   <input id="email" name="email" />  </p>  <p>   <label for="password">Password</label>   <input id="password" name="password" type="password" />  </p>  <p>   <label for="confirm_password">    </label>   <input id="confirm_password" name="confirm_password" type="password" />  </p>     <p>         <input type="submit" value="Submit"/>     </p> </form>
required：trueはrequiredを持っていなければなりません。「𞈼aa:checed」表現の値は本当です。required:function()を検証して本物に戻す必要があります。表の場合は後の2つのよく使われていることを検証してください。フォームには同時に記入または記入しない要素が必要です。
五、常用方法及び注意問題
1.デフォルトのSUBMITを他の方法で代替する
$().ready(function() {
  $("#signupForm").validate({
         submitHandler:function(form){
             alert("submitted");   
             form.submit();
         }    
     });
 });
validateのデフォルト値を設定できます。書き方は以下の通りです。
$.validator.setDefaults({
  submitHandler: function(form) { alert("submitted!");form.submit(); }
 });
フォームを提出するには、form.submit()を使って$
2.debug、検証だけはフォームを提出しません。
このパラメータがtrueであれば、フォームは提出されません。チェックだけして、デバッグする時に便利です。
$().ready(function() {
  $("#signupForm").validate({
         debug:true
     });
 });
一つのページに複数のフォームがあれば、デバッグに設定したいです。
$.validator.setDefaults({
    debug: true
 })
3.ignore：一部の要素を無視して、ignoreを検証しない:「.ignore」
4.エラー情報の表示位置を変更する
error Placement：Callback 
 Default:エラー情報を検証の要素の後ろに置く  エラーが置かれている位置を指定してください。デフォルトでは、error.apendTo(element.parent);エラー情報を検証の要素の後ろに置いてください。
errorPlacement: function(error, element) {  
     error.appendTo(element.parent());  
 }
<tr>
     <td><label id="lfirstname" for="firstname">First Name</label></td>
     <td><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
     <td></td>
 </tr>
 <tr>
     <td style="padding-right: 5px;">
         <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
         <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
     </td>
     <td style="padding-left: 5px;">
         <input id="dateformat_am" name="dateformat" type="radio" value="1"  />
         <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
     </td>
     <td></td>
 </tr>
 <tr>
     <td>&nbsp;</td>
     <td colspan="2">
         <div id="termswrap">
             <input id="terms" type="checkbox" name="terms" />
             <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
         </div>
     </td>
 </tr>
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であれば、コンテンツの後ろに表示されます。
error Class：String  Default:「error」  エラーメッセージのcssクラス名を指定します。エラーメッセージのスタイルをカスタマイズできます。
errorElement：String  Default:「label」  どのタグで間違えましたか？標準はlabelです。emに変えられます。
error Continer:Selector  検証情報の表示または非表示は、エラーが発生した時に容器の属性を表示に変更し、エラーがない時には隠し、大きな役割を果たします。
errorLabelContiner：Selectorはエラー情報を一つの容器にまとめて置いています。
wrapper：Stringはどんなラベルで上のerrorElementを包みますか？
この3つの属性を同時に使用して、一つのコンテナにすべてのエラーメッセージを表示する機能を実現します。情報がない場合は自動的に隠します。
error Conttainer:「div.error」，error Label Continer:$
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 &nbsp; as text for IE
     label.html("&nbsp;").addClass("checked");
     //label.addClass("valid").text("Ok!")
 }
検証要素に「valid」を追加し、CSSで定義されたスタイル「style」label.valid{}success:「valid」
 
7.検証のトリガ方式の変更
下のはbootlean型ですが、falseに変更しない限り、むやみに追加しないようにしてください。
onsubmit:Boolean  Default:true  提出時に検証します。唯falseを設定して、他の方法でonfocusout:Booleanを検証します。  Default:true  焦点を失うのは検証（checkbox/radio buttonsを含まない）onkeyup：Boolean  Default:true  keyupで検証.onclick:Boolean  Default:true  checkboxsとradioでクリックした時にfocus Invalid:Booleanを確認します。  Default:true  フォームを提出すると、検証されていないフォーム（最初または提出前に焦点を合わせた未検証フォーム）にフォーカスfocus Cleeanup:Booleanが得られます。  Default:false  trueであれば、検証されていない要素に焦点を合わせて、エラーメッセージを削除します。focus Invalidと一緒に使用しないでください。
 
//フォームのリセット
$().ready(function() {
  var validator = $("#signupForm").validate({
         submitHandler:function(form){
             alert("submitted");   
             form.submit();
         }    
     });
     $("#reset").click(function() {
         validator.resetForm();
     });
});
8.非同期検証
remote:URLはajax方式で検証します。デフォルトでは現在の検証値をリモートアドレスに提出します。他の値を提出する必要があれば、dataオプションを使ってもいいです。
remote: "check-email.php"
remote: { 
    url: "check-email.php",//      
    type: "post",               //        
    dataType: "json",           //      
    data: {                     //      
        username: function() { 
            return $("#username").val();
        },
        dataFilter: function (data) {  //        
            data = $.parseJSON(data);
            return data.error > 0 ? false : true;
        }
    }
}
リモートアドレスもJsonを出力してもいいです。受信側は処理が必要です。
 
9.カスタムチェックを追加
addMethod:name，method，messageカスタム検証方法
//中文字の2バイトjQuery.validator.addMethod（「byteRange Length」、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(=param[1])    }, $.validator.format（「入力の値は｛0｝から｛1｝バイトの間（1つの文字は2バイトとして計算される）であることを確認してください。
//郵便番号の検証    jQuery.validator.addMethod（「isZipCode」、function（value、element）｛        var tel=/^[0-9]{6}/;    return this.optional（element）は、「郵便番号を正確に記入してください。」
10.radioとcheckbox、selectの検証
 
1.radioのrequired表示は必ず一つを選択してください。  type=「radio」id=「gendermumale」value=「m」name=「gender」class=「{required:true}」/<>input  type=「radio」id=「genderafemale」value=「f」name=「gender」/>
 
2.checkboxのrequiredはcheckboxのminlengthは選択しなければならない最小個数を表し、maxlengthは最大の選択個数を表し、ragenegth:[2,3]は選択個数区間を表します。
■input type=“checkbox”id=“spamauemail”value=“email”name=“spam[]class=“{required:true、minlength:2]/>＜inputtype=“checkbox”id=“spamuuuhone”value=“splue=”value=“phname===“ppupupupupupumimimimimimimimimimitttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt」/>
 
    3.selectのrequiredは選択されたvalueが空であることができないことを表します。   
SharePoint 2010 RBSのインストールと配置に問題が発生しました。
scikit-learn