jQuery検証コントロールjquery.validate.js使用説明+中国語API(1)

7162 ワード

jQuery公式サイトのアドレスをチェック:http://bassistance.de/jquery-plugins/jquery-plugin-validation
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: "Pleaseenter 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.jsに入れて、ページに紹介します。
<script src="../js/messages_cn.js"type="text/javascript"></script>
四、使い方
1.チェックルールをコントロールに書きます。
<scriptsrc="../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>
       <labelfor="firstname">Firstname</label>
       <input id="firstname" name="firstname"class="required" />
   </p>
 <p>
  <labelfor="email">E-Mail</label>
  <inputid="email" name="email" class="required email"/>
 </p>
 <p>
  <labelfor="password">Password</label>
  <inputid="password" name="password" type="password"class="{required:true,minlength:5}" />
 </p>
 <p>
  <labelfor="confirm_password">    </label>
  <inputid="confirm_password" name="confirm_password" type="password"class="{required:true,minlength:5,equalTo:'#password'}"/>
 </p>
   <p>
       <input class="submit" 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>
       <labelfor="firstname">Firstname</label>
       <input id="firstname" name="firstname"/>
   </p>
 <p>
  <labelfor="email">E-Mail</label>
  <inputid="email" name="email" />
 </p>
 <p>
  <labelfor="password">Password</label>
  <inputid="password" name="password" type="password"/>
 </p>
 <p>
  <labelfor="confirm_password">    </label>
  <inputid="confirm_password" name="confirm_password" type="password"/>
 </p>
   <p>
       <input class="submit" type="submit"value="Submit"/>
   </p>
</form>
required:trueはrequiredを持っていなければなりません。「𞈼a:checkeed」表現の値は本当です。required:function()を検証して本物に戻す必要があります。表の場合は後の2つのよく使われていることを検証して、フォームの中で同時に記入または記入しない要素が必要です。
原文:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html