jquery validate.js フォーム validation_jquery の基本的な使い方を始める

先輩が書いた記事を、記録のみを目的として、私自身の理解に基づいて修正し、ここに転載します。
まず国内大手企業のコードを投稿します:

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

javascript">
$( document).ready(function() {
$("#loginForm").validate({
ルール: {
uEmail: {
必須: true 、
メール: true
}、
uPassword: {
必須: true、
rangelength: [6, 30]
}
}、
メッセージ: {
uEmail: {
必須: lang('ls_input_myb'),
email: lang('ls_myb_email')
},
uPassword: {
必須: lang('ls_login_password' ),
rangelength: $.format(lang('ls_password_length'))
}
},
errorPlacement: function(error, element) {
var placement = $(element.parent) ("td").parent(" tr").next("tr").find("td").get(1));
placement.text(''); (配置);
onkeyup: false
});
var accountTipsText = lang("#uEmail"); {
if (!$( $(this).parent().parent().next().find('td').get(1)).text()) {
$($ (this).parent().parent ().next().find('td').get(1)).html('' accountTipsText ' ');
}
$(this).css('color', '#000')
}).focus()
}); ;


実際、このコードには jquery.validate.js の本質がほぼ含まれています。
以前、先物ウェブページのオンラインシミュレーションをしていたとき、自分でコードを書いて判断したことを思い出しました...
以下は記事の完全な紹介です。
デフォルトの検証ルール
(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 未満にすることはできません
デフォルトのヒント




コードをコピー

コードは次のとおりです: messages: { required: "このフィールドは必須です。", remote: "このフィールドを修正してください."、email: "有効な電子メール アドレスを入力してください。"、

url: "有効な URL を入力してください。"、

date: "有効な日付を入力してください。"、
dateISO : "有効な日付 (ISO) を入力してください。"、
dateDE: "数値を入力してください。"、
number : "有効な数値を入力してください。"、
numberDE: "ビットgeben Sie eine Nummer ein."、
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} 以上の値を入力してください。")
},


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

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

jQuery.extend(jQuery.validator.messages, {
required: "必須フィールド",
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に配置し、
の使用法を導入します。ページ
1. 検証ルールをコントロールに書き込みます

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

> ;
$().ready(function() {
$("#signupForm").validate();

Firstname


for="パスワード ">パスワード
🎜>パスワードの確認

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: {
firstname: "required",
email: {
必須: true,
メールアドレス: true
},
パスワード: {
必須: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "名前を入力してください",
email: {
必須: "メール アドレスを入力してください"、
email: "正しいメール アドレスを入力してください"
}、
パスワード: {
必須: "入力してくださいあなたのパスワード" ,
minlength: jQuery.format("パスワードは {0} 文字未満にすることはできません")
},
confirm_password: {
required: "確認用のパスワードを入力してください",
minlength: "パスワードは 5 文字未満であることを確認してください",
equalTo: "2 回入力されたパスワードは矛盾しています"
}
}
}); 🎜>//messages、コントロールにメッセージがない場合、デフォルトのメッセージは

と呼ばれます。 firstname">Firstname label>

電子メール

Password

パスワードの確認

< ;input class="submit" type="submit" value="Submit"/>


には値が必要です
required:"# aa:checked" 式の値が true の場合、
required:function(){} が true を返すことを確認する必要があります。後の 2 つのタイプはフォームを作成するときに確認する必要があります。

の要素は、フォームに同時に入力するか、入力しないためによく使用されます。
一般的なメソッドと注意事項
1. デフォルトの SUBMIT

を置き換えるには、他のメソッドを使用します。


コードをコピー

コードは次のとおりです。 $().ready(function() { $( "#signupForm").validate({

submitHandler:function(form){

alert("submitted ");
form.submit();
}
}); >});


次のように記述して、validate のデフォルト値を設定できます。 !");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()); つまり、検証された要素




Copy の後に配置されます。 code


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

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() );
}

代用の効果: 一般的な状況では、 内でラジオ放送が表示されます。 td>中、チェックボックスが内容の後ろに表示される場合
errorClass:String デフォルト: "error"
指定された错误のヒント css クラス名、独自に定義できる错误のヒントの型
errorElement ：文字列 デフォルト： "label"
使用するものはラベルです、変更可能です
errorContainer：セレクター
表示または隐藏验证情報、自発的に表示できます時持ち容器プロパティは表示に変更され、問題のない応答時間の経過を示します。
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer: セレクター
は、問題のある応答情報をコンテナーの面に配置します。
wrapper: String
さらに上の errorELement パケットを使用して、
通常、この 3 つのプロパティを同時に使用し、すべての警告メッセージの機能を 1 つのコンテナ内で表示し、情報がない場合は自動的に実行します。
errorContainer: "div. error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"
設置错误提示的样式，可增加图标显示
input.error { border: 1px赤一色。 }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
パディング左: 16px;
パディングボトム: 2px;
フォントの太さ: 太字;
カラー: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}
success：String,Callback
要誌证的要素通過过誌证後の動作，如果跟一字符串，会当為一css类，可跟一関数数
success: function(label ) {
// を IE のテキストとして設定します
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}
"valid" を追加、CSS 内で定義された样式
成功: "有効"
nsubmit: ブール値 デフォルト: true
提交時間验证。 設定唯false就用その他の方法去验证
onfocusout：ブール値 デフォルト：true
失去焦点は验证（チェックボックス/ラジオボタンは含まれません）
onkeyup：ブール値 デフォルト：true
キーアップ時に验证。
onclick：Boolean デフォルト：true
チェックボックスとラジオポイントの時間チェック
focusInvalid：Boolean デフォルト：true
提交表单後、未通過の表单（最初または提交の前に获得焦点的）
focusCleanup:ブール値 デフォルト: false
true の場合、テストによって要素が焦点を取得できなかった場合、解除されます。 >

复制代 代码如下:

// 重置表单

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

});
$("#reset").click(function() {
validator.resetForm();
});


remote: URL
Use ajax for verification. By default, the currently verified value will be submitted to the remote address. If you need to submit other values, you can use the data option

Copy code The code is as follows:

remote: "check-email.php"
remote: {
url: "check-email. php", //Background processing program
type: "post", //Data sending method
dataType: "json", //Accept data format
data: { //Data to be transferred
username: function() {
return $("#username").val();
}
}
}

Remote address can only be output" true" or "false", no other output is allowed
addMethod: name, method, message
Custom validation method
// Two bytes of Chinese characters
jQuery.validator.addMethod("byteRangeLength ", function(value, element, param) {
var length = value.length;
for(var i = 0; i if(value.charCodeAt( i) > 127){
length ;
}
}
return this.optional(element) || ( length >= param[0] && length }, $.validator.format("Please ensure that the entered value is between {0}-{1} bytes (one Chinese character counts as 2 bytes)"));
/ / Zip code validation
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional (element) || (tel.test(value));
}, "Please fill in your zip code correctly");
Verification of radio, checkbox, and select
Required of radio means that one must be selected


required in checkbox means it must be selected

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

Copy code The code is as follows:

required in select means that the selected value cannot be empty

Copy code Code As follows:

Buga
Baga
< ;option value="3">Oi
The maximum number of selected items, rangelength:[2,3] represents the selected number range

Copy the code The code is as follows:

Banana

Apple
Peach
Turtle



The layout of the article is a bit messy, just my own record~~