jquery.validate 使用ガイド パート 1_jquery

主にいくつかのパートに分かれています
jquery.validateの基本的な使い方
jquery.validate APIの説明
jquery.validateのカスタマイズ
jquery.validateの一般的な検証コードの種類

ダウンロード アドレス

jquery.validate プラグインのドキュメント アドレス
http://docs.jquery.com/Plugins/Validation

ホームページjquery.validate プラグイン
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

デモは jquery.validate プラグインのホームページで提供されています
http:// jquery.bassistance.de/validate /demo/

検証ルール 以下はデフォルトの検証ルールです。ルールをカスタマイズすることもできます

(1)required:true必須フィールド
(2) リモート:"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 未満にすることはできません

確認プロンプト

以下はデフォルトの確認プロンプトです。公式 Web サイトは簡略版です ダウンロード中国語版の検証プロンプトを使用するか、jQuery.extend(jQuery.validator.messages) を通じてエラー プロンプト メッセージをカスタマイズして、Web サイトの検証プロンプト テキストを 1 つのファイルに統合します。

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

必須: 「このフィールドは必須です。」 、
remote: "このフィールドを修正してください。"、
email: "有効なメール アドレスを入力してください。"、
url: "有効な URL を入力してください。"、
date: "有効な日付を入力してください。"、
dateISO: "有効な日付 (ISO) を入力してください。"、
number: "有効な数値を入力してください。"、
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} 以上。")

使用法

1:
コントロールでデフォルトの検証ルールを使用します。例:
電子メール (必須) 2:
コントロール内の検証ルールをカスタマイズできます。例:
カスタマイズ済み (必須) ) 入力してください、[3,5])


3: 検証をカスタマイズするJavaScript によるルール。次の JS は、password とconfirm_password の 2 つのルールをカスタマイズします。

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

$().ready(function() {
$("#form2").validate({
ルール: {
パスワード: {
必須: true 、
minlength: 5
}、
confirm_password: {
required: true、
minlength: 5、
equalTo: "#password"
}
}、
messages : {
password: {
required: "パスワードが入力されていません",
minlength: jQuery.format("パスワードは {0} 文字未満にすることはできません")
},
confirm_password: {
required: "パスワードの確認はありません"、
minlength: "確認用のパスワードは {0} 文字未満にすることはできません"、
equalTo: "2 回入力されたパスワードは矛盾しています"
}
}
});
});

必須 true/false に設定するだけでなく、

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

$("#form2").validate({
rules: {
funcvalidate: {
required: function() {return $("#password").val() !=""; }
}
},
messages: {
funcvalidate: {
required: "パスワードがある場合は必須"
}
}
});

パスワード
パスワードの確認
条件付き検証


4: メタを使用する検証情報をカスタマイズするには
まず JS でメタを設定します
$("#form3").validate({ meta: "validate" });

Html

email


5: メタを使用して、validate
JS set meta
$() などの検証ルールをカスタム タグに書き込みます。 ready(function() {
$.metadata.setType("attr", "validate");
$("#form1").validate();
Html

メール
validate="{required:true, email:true,messages:{required:' メール アドレスを入力してください' 、email:'入力されたメール アドレスは有効なメール アドレスではありません'}}" />


6: カスタム検証ルール

複雑な場合 検証のために、以下を追加できますjQuery.validator.addMethod によるカスタム検証ルール
公式 Web サイトによって提供されるAdditional-methods.js には、lettersonly、ziprange、nowhitespace などの一般的に使用される検証メソッドがいくつか含まれています。

例

コードをコピー コードは次のとおりです: // 文字検証

jQuery。 validator.addMethod("userName", function(value, element) {

return this.optional(element) || /^[u0391-uFFE5w] $/.test(value);
}, "ユーザー名は漢字、英字、数字、アンダースコアのみを含みます");

//このルールを使用できます
$("#form1").validate({
// 検証ルール
rules: {
userName: {
required: true,
userName: true,
rangelength: [5,10]
}
},
/* 設定エラーメッセージ*/
messages: {
userName: {
required: "ユーザー名を入力してください",
rangelength: "ユーザー名は 5 ～ 10 文字である必要があります"
}
},
});



7: ラジオ、チェックボックス、および選択の検証方法は

ラジオ検証 と同様です。
性別

男性 ;br />
input type="radio" id="gender_personal" value="f" name="gender" />

チェックボックス

少なくとも 2 つの項目を選択します

オプション 1class = "{required:true,minlength:2,messages:{required:'must select',minlength:'少なくとも 2 つの項目を選択する必要があります'}}" />

オプション 2

オプション 3



検証を選択

ドロップダウン ボックス

< select id="selectbox" name="selectbox" class="{required:true}">
"1" > 1
2


8: Ajax 検証


Ajax 検証はリモート
remote: {
url: " url", / /urlアドレスtype: "post", //送信メソッドdataType: "json", //データ形式 data: { //転送するデータ
username: function() {
return $("#username").val();
}}
}

補足: jQuery Validation プラグインのリモート検証メソッドのバグ

http://www. jb51.net/article/24079.htm


次の章では API について詳しく説明し、その後、jQuery.validate をさらにカスタマイズする方法をまとめます。インターネット上で一般的に使用されるいくつかの確認コード