jQuery検証コントロールjquery.validate.js使用説明+中国語API(1)
7162 ワード
jQuery公式サイトのアドレスをチェック:http://bassistance.de/jquery-plugins/jquery-plugin-validation
jsライブラリを導入すると
(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以下ではいけません。
三、デフォルトのヒント
1.チェックルールをコントロールに書きます。
以下の方法を使用して、ヒント内容を修正してもいいです。class=「{required:true,minlength:5,messages:{required:''内容を入力してください'}」
equalToのキーワードを使う時、後の内容は引用符を付けなければなりません。コード:class="
2.検査規則をjsコードに記入する
原文:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html
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