jQueryの検証

jQuery Validate

jQuery Validate プラグインは、フォームの強力な検証機能を提供し、クライアント側のフォーム検証を容易にすると同時に、さまざまなアプリケーションのニーズを満たす多数のカスタマイズオプションを提供します。このプラグインには、URL や電子メール検証などの一連の便利な検証メソッドがバンドルされており、ユーザー定義メソッドを作成するための API が提供されます。バンドルされているすべてのメソッドでは、デフォルトでエラーメッセージに英語が使用され、他の 37 言語に翻訳されています。

このプラグインは、jQuery チームのメンバー、jQuery UI チームの主任開発者、および QUnit のメンテナーである Jörn Zaefferer によって作成および保守されています。このプラグインは 2006 年の jQuery の初期から存在し、それ以来更新され続けています。現在のバージョンは1.14.0です。

jQuery Validate 公式 Web サイトにアクセスし、jQuery Validate プラグインの最新バージョンをダウンロードします。

デフォルトの検証ルール

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

デフォルトプロンプト

messages: {
	required: "This field is required.",
	remote: "Please fix this field.",
	email: "Please enter a valid email address.",
	url: "Please enter a valid URL.",
	date: "Please enter a valid date.",
	dateISO: "Please enter a valid date ( ISO ).",
	number: "Please enter a valid number.",
	digits: "Please enter only digits.",
	creditcard: "Please enter a valid credit card number.",
	equalTo: "Please enter the same value again.",
	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}." )}

jQuery Validateは、ダウンロードパッケージのdist/localization/messages_zh.jsにある中国語メッセージプロンプトパッケージを提供します。内容は次のとおりです:

(function( factory ) {if ( typeof define === "function" && define.amd ) {
		define( ["jquery", "../jquery.validate"], factory );} else {
		factory( jQuery );}}(function( $ ) {/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */$.extend($.validator.messages, {
	required: "这是必填字段",
	remote: "请修正此字段",
	email: "请输入有效的电子邮件地址",
	url: "请输入有效的网址",
	date: "请输入有效的日期",
	dateISO: "请输入有效的日期 (YYYY-MM-DD)",
	number: "请输入有效的数字",
	digits: "只能输入数字",
	creditcard: "请输入有效的信用卡号码",
	equalTo: "你的输入不相同",
	extension: "请输入有效的后缀",
	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} 的数值")});}));

ローカリゼーション情報ファイルdist/localizationを導入できます。 /messages_zh.js からページ:

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

使い方

1. コントロールに検証ルールを書き込みます

インスタンス

インスタンスを実行する»
「インスタンスを実行」ボタンをクリックしてオンラインで表示しますインスタンス

2. 検証ルールが

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>
<style>
.error{
	color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
</body>
</html>

messages の js コードに書き込まれていることを確認します。コントロールにメッセージがない場合は、デフォルトのメッセージが呼び出されます。

値が必要です。

必須: "#aa:checked"

式の値が true の場合、検証が必要です。

required: function(){}
は true を返し、検証が必要であることを示します。後の 2 つは、同時に入力または省略する必要があるフォーム内の要素によく使用されます。

一般的なメソッドと注意すべき問題

1. デフォルトの SUBMIT を他のメソッドで置き換えます

$().ready(function() {// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2      },
      password: {
        required: true,
        minlength: 5      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"      },
      email: {
        required: true,
        email: true      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2      },
      agree: "required"    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"    }});

ajax メソッドを使用します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
	    rules: {
	      firstname: "required",
	      lastname: "required",
	      username: {
	        required: true,
	        minlength: 2
	      },
	      password: {
	        required: true,
	        minlength: 5
	      },
	      confirm_password: {
	        required: true,
	        minlength: 5,
	        equalTo: "#password"
	      },
	      email: {
	        required: true,
	        email: true
	      },
	      "topic[]": {
	        required: "#newsletter:checked",
	        minlength: 2
	      },
	      agree: "required"
	    },
	    messages: {
	      firstname: "请输入您的名字",
	      lastname: "请输入您的姓氏",
	      username: {
	        required: "请输入用户名",
	        minlength: "用户名必需由两个字母组成"
	      },
	      password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母"
	      },
	      confirm_password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母",
	        equalTo: "两次密码输入不一致"
	      },
	      email: "请输入一个正确的邮箱",
	      agree: "请接受我们的声明",
	      topic: "请选择两个主题"
	    }
	});
});
</script>
<style>
.error{
	color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester
      </label>
      <label for="topic" class="error" style="display:none">至少选择两个</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>
</body>
</html>

次のように記述された validate のデフォルト値を設定できます:

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();        }    
    });});

フォームを送信するには、$(form).submit() を使用する代わりに、form.submit () を使用する必要があります。 2. デバッグし、検証のみを行い、フォームを送信しません

このパラメーターが true の場合、フォームは送信されず、チェックのみが行われるため、デバッグに非常に便利です。

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 })

デバッグとして設定したいページに複数のフォームがある場合は、次を使用します:

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }});

3. 無視: 検証せずに特定の要素を無視します

$().ready(function() {
 $("#signupForm").validate({
        debug:true    });});

4. エラーメッセージが表示される位置を変更します

$.validator.setDefaults({
   debug: true})

間違った配置を示します。位置 (デフォルト) は次のとおりです: error.appendTo(element.parent()); つまり、エラーメッセージは検証された要素の後に配置されます。

ignore: ".ignore"

インスタンス

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

コードの機能は次のとおりです: 通常、エラーメッセージは <td class="status"></td> に表示されます。ラジオの場合は <td></td> に表示されます。コンテンツの後ろにチェックボックスが表示されます。

Parameter	Type	Description	Default value
errorClass	String	エラープロンプトの CSS クラス名を指定すると、エラープロンプトのスタイルをカスタマイズできます。	"error"
errorElement	String	エラーをマークするために使用するラベルは何ですか? デフォルトは label ですが、em に変更できます。	"label"
errorContainer	Selector	エラーメッセージがある場合に表示するコンテナのプロパティを自動的に変更し、エラーがない場合は非表示にします。使用。 errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer	Selector	エラーメッセージを 1 つのコンテナに入れます。
wrapper	String	上記の errorElement をラップするために使用するラベル。

通常、これら 3 つの属性は、コンテナ内のすべてのエラープロンプトを表示し、情報がない場合に自動的に非表示にする機能を実現するために同時に使用されます。

errorPlacement：Callback

5. エラーメッセージ表示のスタイルを変更する

エラープロンプトのスタイルを設定すると、このシステムでは検証のスタイルを維持するために特別に使用される validation.css が確立されています。ファイル。

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  }

6. 各フィールドは関数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});

$().ready(function() {
	// 提交时验证表单
	var validator = $("#form1").validate({
		errorPlacement: function(error, element) {
			// Append error within linked label
			$( element )
				.closest( "form" )
					.find( "label[for='" + element.attr( "id" ) + "']" )
						.append( error );
		},
		errorElement: "span",
		messages: {
			user: {
				required: " (必需字段)",
				minlength: " (不能少于 3 个字母)"
			},
			password: {
				required: " (必需字段)",
				minlength: " (字母不能少于 5 个且不能大于 12 个)",
				maxlength: " (字母不能少于 5 个且不能大于 12 个)"
			}
		}
	});

	$(".cancel").click(function() {
		validator.resetForm();
	});
});
</script>
<style>
.error{
	color:red;
}
</style>
</head>
<body>
<form method="get" class="cmxform" id="form1" action="">
  <fieldset>
    <legend>登录框</legend>
    <p>
      <label for="user">用户名</label>
      <input id="user" name="user" required minlength="3">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" type="password" maxlength="12" name="password" required minlength="5">
    </p>
    <p>
      <input class="submit" type="submit" value="Login">
    </p>
  </fieldset>
</form>
</body>
</html>

を実行することで検証されます。検証される要素の後に文字列が続く場合は、CSS クラスとして扱われます。機能。

errorContainer: "div.error",errorLabelContainer: $("#signupForm div.error"),wrapper: "li"

CSS <style>label.valid {}</style> で定義されたスタイルで検証要素に「valid」を追加します。

input.error { border: 1px solid red; }label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;}label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;}

7.検証トリガーメソッドの修正

以下はブール型ですが、falseに変更したくない場合はランダムに追加しないことをお勧めします。

トリガーメソッド	タイプ	説明	デフォルト値
onsubmit	ブール	送信時に検証します。他の方法を使用して検証するには false に設定します。	true
onfocusout	Boolean	フォーカスが失われたときを検証します (チェックボックス/ラジオボタンを除く)。	true
onkeyup	Boolean	keyupで検証されました。	true
onclick	Boolean	チェックボックスとラジオボタンのクリックを検証します。	true
focusInvalid	Boolean	フォームが送信された後、検証に失敗したフォーム (送信前にフォーカスを取得した最初のフォームまたは失敗した検証フォーム) がフォーカスを取得します。	true
focusCleanup	Boolean	trueの場合、検証に失敗した要素がフォーカスを取得したときのエラーメッセージを削除します。 focusInvalid での使用は避けてください。	嘘

success：String,Callback

8. 非同期検証

success: function(label) {    // set &nbsp; as text for IE
    label.html("&nbsp;").addClass("checked");    //label.addClass("valid").text("Ok!")}

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

success: "valid"

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

リモートアドレスは "true" または "false" のみを出力し、その他の出力はできません。

9. カスタム検証を追加します

remote：URL

カスタム検証メソッド

remote: "check-email.php"

注: それをAdditional-methods.js ファイルに追加するか、jquery.validate.js ファイルに追加します。 added-methods.js ファイルに記述することをお勧めします。

注: isZipCode: 「中国語の文字、英語の文字、数字、下線のみを含めることができます」をmessages_cn.js ファイルに追加します。呼び出す前に、Additional-methods.js ファイルへの参照を追加します。

10.ラジオ、チェックボックス、選択の確認

ラジオの必須とは、いずれかを選択する必要があることを意味します。

remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {            return $("#username").val();        }    }}

チェックボックスの必須は、選択する必要があることを意味します。

addMethod：name, method, message

チェックボックスの minlength は選択する必要がある最小数を表し、maxlength は選択の最大数を表し、rangelength:[2,3] は選択数の範囲を表します。

// 中文字两个字节jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {    var length = value.length;    for(var i = 0; i < value.length; i++){        if(value.charCodeAt(i) > 127){
            length++;        }    }  return this.optional(element) || ( length >= param[0] && length <= param[1] );   }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));// 邮政编码验证   jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;    return this.optional(element) || (tel.test(value));}, "请正确填写您的邮政编码");

select の required は、選択された値を空にすることができないことを意味します。

<input  type="radio" id="gender_male" value="m" name="gender" required /><input  type="radio" id="gender_female" value="f" name="gender"/>

select の minlength は選択された項目 (複数選択可能な選択) の最小数を表し、maxlength は選択された最大数を表し、rangelength:[2,3] は選択された数の範囲を表します。

<input type="checkbox" class="checkbox" id="agree" name="agree" required />

jQuery.validate 中国語 API

名前	戻り値の型	説明
validate(options)	Validator	選択したFORMを検証します。
valid()	Boolean	検証に合格したかどうかを確認します。
rules()	Options	要素の検証ルールを返します。
rules("add",rules)	オプション	検証ルールを追加します。
rules("remove",rules)	オプション	検証ルールを削除します。
removeAttrs(attributes)	Options	特別な属性を削除して返します。
カスタムセレクター
:blank	Validator	値のないフィルター。
:filled	配列<要素>	値フィルター。
: チェックなし	配列 <要素>	選択されていない要素のフィルター。
Utilities
jQuery.format(template,argument,argumentN...)	String	テンプレート内の {n} をパラメータに置き換えます。

Validator

validate メソッドは Validator オブジェクトを返します。 Validator オブジェクトには、検証プログラムをトリガーしたり、フォームのコンテンツを変更したりするために使用できるメソッドが多数あります。一般的に使用されるメソッドをいくつか紹介します。

名前	戻り値の型	説明
form()	Boolean	検証フォームは成功または失敗を返します。
element(element)	Boolean	単一の要素が成功したか失敗したかを検証します。
resetForm()	未定義	以前に検証されたFORMを検証前の元の状態に戻します。
showErrors(エラー)	未定義	特定のエラーメッセージを表示します。
バリデーター関数
setDefaults(デフォルト)	未定義	デフォルトの設定を変更します。
addMethod(name,method,message)	未定義	新しい検証方法を追加します。一意の名前、JAVASCRIPT メソッド、およびデフォルトのメッセージを含める必要があります。
addClassRules(name, rules)	unknown	結合された検証タイプを追加します。これは、クラスで複数の検証メソッドを使用する場合に便利です。
addClassRules(rules)	未定義	組み合わせた検証タイプを追加します。これは、クラスで複数の検証メソッドを使用する場合にさらに便利です。これは、複数の検証方法を同時に追加するためです。

組み込み検証メソッド

名前	戻り値の型	説明
required()	Boolean	必須の検証要素。
required(dependency-expression)	Boolean	必須要素は式の結果に依存します。
required(dependency-callback)	Boolean	必須要素はコールバック関数の結果によって異なります。
remote(url)	Boolean	リモート検証をリクエストします。 url は通常、リモート呼び出しメソッドです。
minlength(length)	Boolean	最小の長さを設定します。
maxlength(length)	Boolean	最大長を設定します。
rangelength(range)	Boolean	長さの範囲 [min,max] を設定します。
min(value)	Boolean	最小値を設定します。
max(value)	Boolean	最大値を設定します。
email()	Boolean	メール形式を確認してください。
range(範囲)	ブール	値の範囲を設定します。
url()	ブール	URL 形式を確認します。
date()	Boolean	日付形式を検証します (30/30/2008 の形式と同様に、日付の正確さは検証されず、形式のみが検証されます)。
dateISO()	Boolean	ISO タイプの日付形式を確認します。
dateDE()	Boolean	ドイツ語の日付形式 (29.04.1994 または 1.1.2006) を確認します。
number()	Boolean	10 進数 (10 進数を含む) を検証します。
digitals()	Boolean	整数を検証します。
creditcard()	ブール	クレジットカード番号を確認してください。
accept(extension)	Boolean	同じサフィックス名を持つ文字列を検証します。
equalTo(other)	Boolean	2 つの入力ボックスの内容が同じかどうかを検証します。
phoneUS()	ブール	米国の電話番号を確認します。

validate() オプション

説明	コード
debug: デバッグモードに入ります (フォームは送信されません)。	<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2" /><input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /><input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
デバッグをデフォルトとして設定します。	<select id="jungle" name="jungle" title="Please select something!" required> <option value=""></option> <option value="1">Buga</option> <option value="2">Baga</option> <option value="3">Oi</option></select>
submitHandler: 検証に合格した後に実行される関数には、フォーム送信関数が含まれている必要があります。含まれていない場合、フォームは送信されません。	<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple"> <option value="b">Banana</option> <option value="a">Apple</option> <option value="p">Peach</option> <option value="t">Turtle</option></select>
ignore: 一部の要素を検証しません。	$(".selector").validate({ debug:true})
rules: key:value の形式のカスタムルール。key は検証される要素で、value は文字列またはオブジェクトです。	$.validator.setDefaults({ debug:true})
messages: key:value の形式のカスタムプロンプトメッセージ。key は検証対象の要素で、value は文字列または関数です。	$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit();}})
groups: 要素のグループを確認し、エラープロンプトを使用し、errorPlacement を使用してエラーメッセージを配置する場所を制御します。	$("#myform").validate({ ignore:".ignore"})
OnSubmit: ブール型、デフォルトは true、送信時に検証するかどうかを指定します。	$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true}}})
onfocusout: ブール型、デフォルトは true、フォーカスを取得するときに検証するかどうかを指定します。	$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true}}, messages:{ name:"Name不能为空", email:{ required:"E-mail不能为空", email:"E-mail地址不正确"}}})
onkeyup: ブール型、デフォルトは true、キーボードが打たれたときに検証するかどうかを指定します。	$("#myform").validate({ groups:{ username:"fname lname"}, errorPlacement:function(error,element) {if (element.attr("name") == "fname" \|\| element.attr("name") == "lname") error.insertAfter("#lastname");else error.insertAfter(element);}, debug:true})
onclick: ブール型、デフォルトは true、マウスのクリック時に検証するかどうかを指定します (一般検証チェックボックス、ラジオボックス)。	$(".selector").validate({ onsubmit:false})
focusInvalid: ブール型、デフォルトは true。フォームが送信されると、検証に失敗したフォーム (最初に検証に失敗したフォーム、または送信前にフォーカスを受け取ったフォーム) がフォーカスを取得します。	$(".selector").validate({ onfocusout:false})
focusCleanup: ブール型、デフォルトは false。未検証の要素がフォーカスを取得したときのエラーメッセージを削除します (focusInvalid での使用は避けてください)。	$(".selector").validate({ onkeyup:false})
errorClass: 文字列型、デフォルトは「error」。エラープロンプトの CSS クラス名を指定して、エラープロンプトのスタイルをカスタマイズします。	$(".selector").validate({ onclick:false})
errorElement: 文字列型、デフォルトは「ラベル」。エラーをマークするために使用するラベルを指定します。	$(".selector").validate({ focusInvalid:false})
wrapper: 文字列を入力し、使用するラベルを指定し、上記の errorElement をラップします。	$(".selector").validate({ focusCleanup:true})
errorLabelContainer: エラー情報をコンテナに入れるタイプセレクター。	$(".selector").validate({ errorClass:"invalid"})
showErrors: 検証に失敗した要素の合計数を表示する関数が続きます。	$(".selector").validate errorElement:"em"})
errorPlacement: 関数を使用すると、エラーが配置される場所をカスタマイズできます。	$(".selector").validate({ wrapper:"li"})
success: 検証対象の要素が検証に合格した後のアクションは、文字列が続く場合、CSS クラスとして扱われるか、関数が後に続くこともあります。	$("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") }})
ハイライト: 検証に合格していない要素にエフェクトやフラッシュなどを追加できます。

addMethod(name,method,message)method

パラメータ名は追加されたメソッドの名前です。

Parameterメソッドは、3つのパラメータ(value、element、param)を受け取る関数です。
value は要素の値、element は要素自体、param はパラメータです。

addMethod を使用して、組み込みの Validation メソッドに加えて検証メソッドを追加できます。たとえば、1 つの文字のみを入力できるフィールドがあり、その範囲は次のようになります:

$(".selector").validate({  
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");this.defaultShowErrors();}})

id="username" のフォームフィールドがある場合、ルールを記述します:

$("#myform").validate({  
	errorPlacement:function(error,element) {  
		error.appendTo(element.parent("td").next("td"));   },
   debug:true})

addMethod の最初のパラメータは、追加された検証メソッドの名前です。この場合は af です。
addMethod の 3 番目のパラメーターは、カスタマイズされたエラープロンプトです。ここでのプロンプトは、「文字と a ～ f である必要があります」です。
addMethod の 2 番目のパラメータは関数です。これはより重要であり、この検証メソッドを使用する際の書き込み方法を決定します。

パラメータが 1 つだけの場合は、af: "a" のように直接記述します。複数のパラメータがある場合は、[] で区切って記述します。

メタ文字列メソッド

$("#myform").validate({        
	success:"valid",
        submitHandler:function() { 
			alert("Submitted!") 
		}})

$.validator.addMethod("af",function(value,element,params){  
	if(value.length>1){return false;}    if(value>=params[0] && value<=params[1]){return true;}else{return false;}},"必须是一个字母,且a-f");

サンプルデモンストレーション

架空の例

エラーメッセージコンテナ
要素データとしてのカスタムメッセージ
ラジオ（ラジオボタン）、チェックボックス（チェックボタン）、選択（ドロップダウンボックス））
フォーム (Form) プラグインとの対話 (AJAX 送信)
カスタムメソッドとメッセージ表示
動的フォーム
jQuery UI Themeroller を使用してフォームスタイルを定義
TinyMCE - 軽量のブラウザベースの WYSIWYG エディター
ファイル入力ボックス
jQueryモバイルフォーム検証

実際の例

牛乳登録フォーム
Marketo登録フォーム
住宅売買の折りたたみパネルフォーム
リモートCAPTCHA（検証コード）検証

jQueryの検証

jQuery Validate

デフォルトプロンプト

使い方

1. コントロールに検証ルールを書き込みます

インスタンス

messages の js コードに書き込まれていることを確認します。コントロールにメッセージがない場合は、デフォルトのメッセージが呼び出されます。

必須: "#aa:checked"

デバッグとして設定したいページに複数のフォームがある場合は、次を使用します:

3. 無視: 検証せずに特定の要素を無視します

コードの機能は次のとおりです: 通常、エラー メッセージは <td class="status"></td> に表示されます。ラジオの場合は <td></td> に表示されます。コンテンツの後ろにチェックボックスが表示されます。

5. エラー メッセージ表示のスタイルを変更する

6. 各フィールドは関数

7.検証トリガーメソッドの修正

8. 非同期検証

9. カスタム検証を追加します

10.ラジオ、チェックボックス、選択の確認

jQuery.validate 中国語 API

Validator

組み込み検証メソッド

validate() オプション

addMethod(name,method,message)method

メタ文字列メソッド

サンプルデモンストレーション

架空の例

実際の例

PHP中国語ウェブサイト

コードの機能は次のとおりです: 通常、エラーメッセージは <td class="status"></td> に表示されます。ラジオの場合は <td></td> に表示されます。コンテンツの後ろにチェックボックスが表示されます。

5. エラーメッセージ表示のスタイルを変更する