jQueryの検証

（このチュートリアルのCDNを使用して）インポートJSライブラリ

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

デフォルトのバリデーションルール

デフォルトのヒント

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の検証は、ダウンロードパッケージのdist /ローカリゼーション/ 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, 中文 (Zhongwé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 /ローカリゼーション/ messages_zh.jsをローカライズすることができます。

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

使用

1、検証ルール書か制御

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<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>

»をお試しください

2、検証ルール書かれたjsのコード

$().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: "请选择两个主题"
    }
});

コントロールでのメッセージは、メッセージがない場合、デフォルトの情報を使用します

<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">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

»をお試しください

必要：真の値をする必要があります。
必要： "#aa：確認された「真の表現であり、あなたは確認する必要があります。
必要：関数（）{} trueを返す、検証の必要性を表明しました。

形で一般的にバックで使用される2つは、要素を埋める埋めるかないようにする必要があります。

問題への一般的な方法と注意

1、そうでなければデフォルトはSUBMIT置き換えます

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

AJAXを使用する方法

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

デフォルト値を設定することができ、次のように言葉で表現検証：

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

フォームを送信したい場合は、（form.submitを使用する必要があります）、代わりに$（フォーム）.submit（）の。

2、デバッグは、確認のみ、フォームを送信されていません

このパラメータがtrueの場合、フォームが送信されていない、唯一のチェックが行わデバッグするとき、それは非常に便利です。

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

ページが複数のフォームがデバッグに設定したい持っている場合は、使用します。

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

3、無視：特定の要素を無視検証されません

ignore: ".ignore"

4.表示されたエラーメッセージの場所を変更

errorPlacement：Callback

見当違いの場所を示す、デフォルトは次のとおりです。error.appendTo（element.parent（））;それは、認証要素の背後に誤ったメッセージです。

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

例

<p>将错误信息放在 label 元素后并使用 span 元素包裹它</p>

<form method="get" class="cmxform" id="form1" action="">
  <fieldset>
    <legend>Login Form</legend>
    <p>
      <label for="user">Username</label>
      <input id="user" name="user" required minlength="3">
    </p>
    <p>
      <label for="password">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>

»をお試しください

コードの役割は次のとおりです。チェックボックスがのコンテンツに表示されている場合は無線は、<TD> </ TD>に表示されている場合は通常の状況でエラーメッセージが<TDクラス= "ステータス"> </ TD>に表示されます背後にあります。

通常、同時にこれらの3つの属性は、コンテナ内の表示にすべてのエラー関数を達成するために、そして何の情報は自動的に非表示にされていません。

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

5、表示されるエラーメッセージのスタイルを変更します

スタイルのエラーを設定するには、システムが検証文書のスタイルを維持するように設計validation.cssを、確立している、アイコンが表示されて増やすことができます。

input.error {ボーダー：1pxの固体赤;}
label.error {
  背景：のURL（ "./デモ/画像/ unchecked.gif」）無リピート0PXの0PX。

  パディング左：16pxに;

  パディング底：2ピクセル;

  フォント重量：太字;

  色：＃のEA5200。
}
{label.checked
  背景：のURL（ "./デモ/画像/ checked.gif」）無リピート0PXの0PX。
}

図6に示すように、各フィールドには、機能を実行することによって確認されます

 成功：文字列、コールバック 

cssクラスとしてだけでなく、機能で処理される文字列が続く場合は、確認後の操作によってその要素を確認します。

成功：関数（ラベル）{
    //設定＆NBSPは、IE用のテキストとして
    label.html（ "＆NBSP;"）。addClass（ "にチェック"）;
    //label.addClass("valid").text("Ok！ "）
}

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

成功：「有効」

7、トリガーの検証を変更

以下はブール値ですが、あなたはfalseにする場合に限り、推奨、そうでない場合はフリーズは付け加えました。

//）（フォーム$をリセットします。レディ（関数（）{
 するvarバリ= $（ "＃のsignupForm」）。検証（{
        submitHandler：機能（フォーム）{
            警告（ "提出"）;   
            form.submit（）。
        }    
    }）;
    $（ "＃リセット」）。（関数（）{をクリックします
        validator.resetForm（）。
    }）;

}）;

8、非同期検証

 リモート：URL 

AJAXを使用して認証する方法は、他の値を提出する必要があれば、あなたはデータオプションを使用することができ、リモートアドレス検証に現在のデフォルト値に提出しました。

 リモート：「チェックインemail.php」 

リモート：{
    URL：「-email.phpをチェック "、//スプーラタイプ："ポスト "、//データ送信モードのdataType：" jsonの "、//は、データ形式のデータ受信：{ユーザー名//データが渡される：関数（ ）{
            $（ "＃ユーザ名を"）のval（）を返します;
        }
    }
}

リモートアドレス出力のみ "true"または "false"は、他の出力を持つことができません。

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

 addMethod：名、メソッド、メッセージ 

カスタム認証方法

//文字2バイトjQuery.validator.addMethod（「byteRangeLength」、関数（値、要素、のparam）{
    VAR長= value.length。
    以下のために（VAR I = 0; iはvalue.lengthを<;私は++）{
        場合（value.charCodeAt（ⅰ）> 127）{
            長++;
        }
    }
  || this.optional（要素）を返す（長さ> =のparam [0] &&長さ<= PARAM [1]）;   
}、$の.validator.format（ "値は{0}に入力されていることを確認します -  {1}バイトの間（1バイト文字が2を数えます）"））;

//郵便コード検証jQuery.validator.addMethod（「isZipCode」、関数（値、要素）{   
    するvar TEL = / ^ [0-9] {6} $ /;
    || this.optional（要素）を返す（tel.test（値））;
}） "正しい郵便番号を記入してください";

注：追加の-methods.jsファイルを追加したり、jquery.validate.jsファイルを追加します。一般的に、追加の-methods.jsファイルに書かれた勧告。

注：messages_cn.jsファイルを追加：isZipCodeを： "テキスト、文字、数字、およびアンダースコアを含めることができます。」追加-methods.jsファイル参照を追加するに呼び出す前に。

10、ラジオ、チェックボックス、検証を選択

ラジオは、必要な表現を選択する必要があります。

<入力タイプ必要= "ラジオ"のid = "gender_male"値= "M"名前= "性別" />
<入力タイプ= "ラジオ"のid = "gender_female"値= "F"名前= "性別" />

チェックボックスは、必要な表現を選択する必要があります。

<入力タイプ= "チェックボックス"クラス= "チェックボックス" ID = "同意"名前=必要な "同意" />

チェックしなければならないMINLENGTHチェックボックスの最小数は、MAXLENGTHが選択され、rangelengthの最大数を表し：[2,3]は、選択した範囲の数を表します。

<入力タイプ= "チェックボックス"クラス= "チェックボックス" ID = "spam_email"値= "メール"名前= "スパム[]"必要MINLENGTH = "2" />
<入力タイプ= "チェックボックス"クラス= "チェックボックス" ID = "spam_phone"値= "電話"名前= "スパム[]" />
<入力タイプ= "チェックボックス"クラス= "チェックボックス" ID = "spam_mail"値= "メール"名前= "スパム[]" />

空にすることはできません選択した値を示す必要]を選択します。

<選択のid = "ジャングル"名前= "ジャングル"タイトル= "何かを選択してください！"必須>
    <オプション値= ""> </オプション>
    <オプション値= "1">ブガ</オプション>
    <オプション値= "2">バガ</オプション>
    <オプション値= "3">大井</オプション>
</選択>

[2,3]選択した間隔の数を表す：選択した表現MINLENGTH最小数の（選択の複数選択）を選択し、MAXLENGTHは、選択され、rangelengthの最大数を表します。

<選択のid = "フルーツ"名前= "フルーツ"タイトル= "少なくとも二つの果実を選択してください"クラス= "{必要：真、MINLENGTH：2}"複数= "複数">
    <オプション値= "B">バナナ</オプション>
    <オプション値= "">アップル</オプション>
    <オプション値= "P">ピーチ</オプション>
    <オプション値= "トン">タートル</オプション>
</選択>

jQuery.validate中国のAPI

バリデータ

この方法は、バリデータオブジェクトを返す検証します。 多くの方法が較正手順をトリガまたはフォームの内容を変更するために使用することができるバリデータオブジェクトは、いくつかの一般的に使用される方法は、以下に記載されていました。

ビルトイン認証

省略可能です）（検証

$(".selector").validate
({
	debug:true
})

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

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

$("#myform").validate({
	ignore:".ignore"
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能为空",
		email:{       
			required:"E-mail不能为空",
			email:"E-mail地址不正确"
		}
	}
})

$("#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
})

$(".selector").validate({  
	onsubmit:false
})

$(".selector").validate({   
	onfocusout:false
})

$(".selector").validate({
   onkeyup:false
})

$(".selector").validate({
   onclick:false
})

$(".selector").validate({
   focusInvalid:false
})

$(".selector").validate({
   focusCleanup:true
})

$(".selector").validate({ 
	errorClass:"invalid"
})

$(".selector").validate
   errorElement:"em"
})

$(".selector").validate({
   wrapper:"li"
})

$("#myform").validate({   
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() { 
		alert("Submitted!") 
	}
})

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

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

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

addMethod（名、メソッド、メッセージ）方法

パラメータ名は、addメソッドの名前です。

パラメータ法は、三つのパラメータ（値、要素、param）はとる関数です。
値は、要素が要素自体の要素の値である、paramがパラメータです。

私たちは、組み込みの認証方法の検証方法を除いて追加するaddMethodを使用することができます。 たとえば、文字のみを失う、範囲は次のように書かれ、AFで、フィールドがあります：

$ .validator.addMethod（「AF」、関数（値、要素、paramsは）{  
	場合（value.length> 1）{
		falseを返します。
	}
    場合（値> = paramsは[0] &&値<= paramsは[1]）{
		trueを返します。
	}エルス{
		falseを返します。
	}
}、）」の文字と、AFでなければなりません」。

ルールで記述されたフォームフィールドのid = "ユーザ名"、がある場合：

ユーザ名：{
   AF：[ "A"、 "F"]
}

AddMethod最初のパラメータは、その後、AFで、追加する認証方式の名前です。
三番目のパラメータをaddMethod、カスタムエラーメッセージは、ここでは示唆している： "手紙、およびAFでなければなりません」。
addMethod 2番目のパラメータは関数であり、これは、検証のこの方法を使用するという決定の文言より重要です。

複数のパラメータはカンマで区切られ、[]内に記述されている場合の「a」、これは、一意のパラメータである：一つのパラメータのみ場合、このようなAFのように、直接書き込みます。

メタ文字列モード

$（ "＃のMYFORM」）。検証（{

   メタ：「検証」、

   submitHandler：関数（）{ 
警告（「提出！ "）}

}）

ます。<script type = "text / javascriptの" 
SRC = "jsファイル/ jquery.metadata.js"> </スクリプト>

ます。<script type = "text / javascriptの" 
SRC = "jsファイル/ jquery.validate.js"> </スクリプト>

<フォームID = "あるmyForm">

  <input type = "text" 
名前= "メール"クラス= "{検証：{必要：trueの場合、電子メール：真}}" />

  <入力タイプは、= "提出します" 
値= "送信" />

</フォーム>

例のデモ

架空の例

• エラーメッセージコンテナ
• データ要素としてカスタムメッセージ
• ラジオ（ラジオボタン）、チェックボックス（ボタンをチェックしてください）と選択します（ドロップダウンボックス）
• インタラクティブフォーム（フォーム）とプラグ（AJAXの提出）
• カスタムメソッドとメッセージ表示
• ダイナミックフォーム
• jQueryのUI ThemeRollerのカスタムフォームのスタイルを使用します
• TinyMCEは-軽量なブラウザベースのWYSIWYGエディタ
• ファイルの入力ボックス
• jQueryのモバイルは、フォーム認証

現実世界の例

• ミルク登録フォーム
• Marketo登録フォーム
• 住宅販売折りたたみパネルフォーム
• リモートCAPTCHA（PIN）の検証

例ダウンロード

ダウンロード 公式のインスタンスを