jquery.validate_jquery の使用手順

1. 準備
JQuery バージョン: 1.2.6、1.3.2 と互換性が必要

公式ウェブサイトのアドレス: http://jqueryvalidation.org/

2. デフォルトの検証ルール
(1)required:true 必須フィールド
(2)remote:"check.php" ajax メソッドを使用して check.php を呼び出し、入力値
(3)email:true 正しい形式で電子メールを入力する必要があります
(4)url:true 正しい形式で URL を入力する必要があります
(5)date:true を入力する必要があります正しい形式の日付
( 6)dateISO:true 日付 (ISO) を正しい形式で入力する必要があります。例: 2009-06-23、1998/01/22 有効性ではなく、形式のみを検証します。
(7)number:true 有効な番号を入力する必要があります (負の数値、10 進数)
(8)digits:true は整数を入力する必要があります
(9)creditcard: 有効なクレジット カード番号を入力する必要があります
(10)equalTo:"#field" 入力値は #field と同じである必要があります
(11)accept: 有効なサフィックス (アップロードされたファイルのサフィックス) を含む文字列を入力してください
(12) maxlength:5 最大長 5 の文字列を入力します (中国語は 1 文字として数えます)
(13 )minlength:10 最小長 10 の文字列を入力します (中国語は 1 文字として数えます)
( 14)rangelength:[5,10] 長さが 5 ～ 10 の文字列を入力してください") (漢字は 1 文字としてカウントされます)
(15)range:[5,10] 入力値は 5 の間である必要がありますおよび 10
(16)max:5 入力値は 5
(17)min:10 を超えることはできません 入力値は 10

未満にすることはできません

3. デフォルトのプロンプト

コードをコピーします コードは次のとおりです:

messages: {
required: "このフィールドは必須です。"、
remote: "このフィールドを修正してください。"、
email: "有効なメール アドレスを入力してください。"、
url : "有効な URL を入力してください。"、
date: "有効な日付を入力してください。"、
dateISO: "有効な日付 (ISO) を入力してください。"、
dateDE: "ビットgeben Sie ein g眉毛 ltiges Datum ein."、
number: "有効な数字を入力してください。"、
numberDE: "Bitte geben Sie eine Nummer ein."、
digitals: "数字のみを入力してください"、
creditcard: "有効なクレジット カード番号を入力してください。"、
equalTo: "同じ値を再度入力してください。"、
accept: "有効な拡張子を含む値を入力してください。"、
maxlength: $.validator.format("{0} 文字以内を入力してください。"),
minlength: $.validator.format("少なくとも {0} 文字を入力してください。"),
rangelength: $.validator.format("{0} ～ {1} 文字の間の値を入力してください。"),
range: $.validator.format("{0} ～ {1} 文字の間の値を入力してください。 {1 }.")、
max: $.validator.format("{0} 以下の値を入力してください。")、
min: $.validator.format(" {0} 以上の値。")
}、

変更する必要がある場合は、JS コードに追加できます:

コードをコピーします コードは次のとおりです:

jQuery.extend(jQuery.validator.messages, {
必須: "必須フィールド"、
remote: "このフィールドを修正してください"、
email: "正しい電子メール形式を入力してください"、
url: "有効な 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に配置し、をページに導入することをお勧めします。

4. 使用方法
1. 検証ルールをコントロールに書き込みます

コードをコピーします コードは次のとおりです:

 
 
 
 

 

 
firstname 
 

 

 
電子メール 
 

 

 
パスワード 
 

 

 
确认密码 
 

 

 
 

 

 

class="{}" の方法を使用し、包含する必要があります:jquery.metadata.js は次のような方法を使用できます。修正内容:
class="{required:true,minlength :5,messages: {required:'请输入力内容'}}"equalTo关键文字を使用する場合、後面のコンテンツは上引号を追加する必要があります、例えば下代码：
class=" {required:true,minlength:5,equalTo :'#password'}"また、別の方法で、关键字：meta を使用します（元データを使用するために他のアイテムをパッケージ化する必要があります）
検証プラグインに指示します検証ルールのメタデータの validate プロパティ内を調べます。
例：

复制代码 代以下:

meta: "validate" ;

再有一方式:

复制代代码如下:

$.metadata.setType("attr", "validate");これは、validate="{required:true}" の方法、または class="required"、ただし class="{required:true,minlength: を使用できます。 5}"将不起作用 2.将校验规则写都代网中
$().ready(function() {
$("#signupForm").validate({
rules: {
名: "必須",
メールアドレス: {
必須: true,
メールアドレス: true
},
パスワード: {
必須: true,
分の長さ: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
メッセージ: {
名: "请输入姓名",
メールアドレス: {
必須: "请输入Email地址",
メールアドレス: "请输入正确的メール地址"
},
password: {
required: "请输入密码",
minlength: jQuery.format("密码不可{0}个字符")
},
confirm_password: {
required : "请输入确认密码",
minlength: "确认密码 5 文字以下不可",
equalTo: "两次输入密码不一致不一致"
}
}
});
});//messages处、特定のコントロールにメッセージがない場合、调用承認の情報

复制代代码如下:

 

 
firstname 
 

 

 
電子メール 
 

 

 
パスワード 
 

 

 
确认密码 
 

 

 
 

 

 

required:true 必須须有值
required:"#aa:checked" 表达式の值が真，则必要验证
required:function(){} 返される真，表時間にテストが必要な
の後の2つは、表に同時に充填または充填されていない元素を必要とするためによく使用されます。

五、常用方法及び注意问题

1.別の方法で代替承認される SUBMIT$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert ("送信済み");
form.submit();
}
});
});

$.validator.setDefaults({
submitHandler: function(form) {alert("submitted!");form.submit(); }
$.validator.setDefaults({
submitHandler: function(form) {alert("submitted!");form.submit(); }

>});

如果想提交表单、form.submit() の使用が必要ですが、$(form).submit() の使用は不要です

2.debug、このパラメータが true の場合、那么表单不会提交、只行検査、调试時間十分方便
$().ready(function() {
$("#signupForm") .validate({
debug:true
});

});

如果一页面には複数の表があり、
$.validator.setDefaults({
debug: true

})

を使用します
3.ignore：忽略特定元素不验证

ignore: ".ignore"

4.errorPlacement：コールバックデフォルト：错误情報放在验证的要素後面

错误の配置位置の指示、軘认:error.appendTo(element.parent()); 即時错误情報が验证の要素の後ろに放たれます
errorPlacement: function(error, element) {
error .appendTo(element.parent());
}//例：

复制代

代码如下:

 
名 
 
 
 
 
 
 
14/02/07 
 
 
 
02/14/07 
 
 
 
 
 
 

 
 
利用規約を読み、同意します。 
 
 
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() ); 
}
コードの機能は次のとおりです。 通常の状況では、エラー メッセージは に表示されます。ラジオの場合は に表示され、チェックボックスの場合はコンテンツの後ろに表示されます。 errorClass: 文字列 デフォルト: "error"

エラー プロンプトの CSS クラス名を指定すると、エラー プロンプトのスタイルをカスタマイズできます。 errorElement: String Default: "label"

エラーをマークするにはどのラベルを使用する必要がありますか? デフォルトは label です。emerrorContainer: Selector

に変更できます。

検証情報を表示または非表示にすると、エラー メッセージが表示された場合に表示されるコンテナーのプロパティが自動的に変更され、エラーがない場合は非表示になります。

errorContainer: "#messageBox1, #messageBox2"errorLabelContainer：セレクター

エラーメッセージをコンテナに入れます。ラッパー: 文字列

上記の errorElement をラップするにはどのタグを使用する必要がありますか? .error",

errorLabelContainer: $("#signupForm div.error"),
wrapper: "li" エラー プロンプトのスタイルを設定します。表示するアイコンを追加できます。 input.error { border: 1px 単色赤 }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px; padding-bottom: 2px; color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}成功: String,Callback

検証対象の要素が検証に合格した後のアクションは、文字列が続く場合、CSS クラスとして扱われます。または、関数
success: function(label) {// IE のテキストとして設定
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}

CSS で定義されたスタイルで検証要素に「valid」を追加します

success: "valid" nsubmit: Boolean Default: true

送信時に検証します。 false に設定されている場合は、他のメソッドを使用して検証します。

onfocusout: ブール値 デフォルト: true

フォーカスを失うと検証になります (チェックボックス/ラジオ ボタンを除く)

onkeyup: ブール値 デフォルト: true

キーアップ時に確認します。

onclick: ブール値 デフォルト: true

チェックボックスとラジオのクリックを検証します

focusInvalid: ブール値 デフォルト: true

フォームが送信された後、検証に失敗したフォーム (送信前にフォーカスを受け取った最初の検証フォームまたは失敗した検証フォーム) がフォーカスを取得します。

focusCleanup: ブール値 デフォルト: false

true の場合、検証に失敗した要素がフォーカスを取得したときのエラー メッセージを削除します。 focusInvalid との併用は避けてください // フォームをリセット

コードをコピー コードは次のとおりです:

$( ).ready(function() {
var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
$("#reset").click(function() {
validator.resetForm();
}); });

検証に ajax を使用します。デフォルトでは、現在検証されている値がリモート アドレスに送信されます。他の値を送信する必要がある場合は、データ オプション

コードをコピー コードは次のとおりです:

remote: {

url: "check-email. php", //バックエンドハンドラ
type: "post", //データ送信メソッド
dataType: "json", //受け入れるデータ形式
data: { //転送するデータ
username: function() {
return $( "#username").val();
}
}
}


リモート アドレスは " のみを出力できますtrue" または "false" であり、他の出力を持つことはできません addMethod: 名前、メソッド、メッセージ

カスタム検証メソッド

コードをコピー コードは次のとおりです:

// 2 バイトの漢字

jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = 値.長さ;
for(var i = 0; i < 値.長さ; i ){
if(値.charCodeAt(i) > 127){
長さ ;
}
return this.optional(element) | ( length >= param[0] && length
}, $.validator.format("入力された値が {0}-{1} バイト以内であること (漢字 1 文字は 2 バイトとしてカウントされます)"));
// 郵便番号検証
jQuery.validator.addMethod("isZipCode", function(値、要素) {
var tel = / ^[0-9]{6}$/;
return this.optional(element) || (tel.test(value)); "郵便番号を正しく入力してください");

コードをコピー

コードは次のとおりです:

The verification of radio and checkbox and select requires that one must be selected

The required in checkbox means that it must be selected
The minlength of checkbox indicates the minimum number of items that must be selected, and maxlength indicates the maximum number of items that must be selected. rangelength:[2,3] represents the selected number range



required in select means that the selected value cannot be empty
< ;select id="jungle" name="jungle" title="Please select something!" class="{required:true}">

Buga
Baga
Oi ] represents the selected number interval

Copy the code

The code is as follows: radio, checkbox, and select Verify that required means that radio must select one

< ;input type="radio" id="gender_female" value="f" name="gender"/>checkbox required means it must be selected

The minlength of checkbox indicates the minimum number that must be selected, maxlength indicates the maximum number of selected items, and rangelength:[2,3] indicates the range of selected items.



required in select means that the selected value cannot be empty


Buga< ;/option>
Baga
Oi
>The minlength of select represents the minimum number of selected items (multi-selectable select), maxlength represents the maximum selected number, and rangelength:[2,3] represents the selected number range


< ;option value="b">Banana
Apple
Peach Turtle

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。