validateベースカスタム検証アクティブトリガによるエラープロンプトの表示位置の変更

文書ディレクトリ

jquery validateベース

を使用

まず、我々のHTML構造コード

を仮定する.

フォームに基礎検証カスタムプロンプト情報を追加

カスタム検証(正規表現検証)

を追加

アクティブトリガフォーム検証

エラーメッセージの表示位置を変更する

.

最後に、関連する検証規則および関連する操作

が添付される.


jquery validateベース使用
まずHTML構造コードを仮定します

<script src="js/jquery-1.11.3.min.js">script>
<script src="js/jquery.validate.min.js">script>
<form id="form">
	<input name="input1" id="input1"                   placeholder="        " />
	<input name="pwd"    id="pwd"    type="password"   placeholder="     "/>
	<input name="rpwd"   id="rpwd"   type="password"   placeholder="     " />
	<button id="subBtn">  button>
form>

ps:jquery validateを導入する前にjqueryを導入する必要があります
フォームの基礎検証カスタムプロンプト情報の追加

$("#form").validate({
      //      form   
	rules: {
     
		"input1": {
      //     name       ，   id      
			"required": true, //   ：       
		},
		"pwd": {
     
			"required": true,  //   ：     
			"minlength": 6 //              6
		},
		"rpwd": {
     
			equalTo: "#pwd", //         id   pwd         
		}
	},
	messages: {
      //              ，        messages        
		"input1": {
     
			"required": "         ",
		},
		"pwd": {
     
			"required": "      ", 
			"minlength": "         6 "
		},
		"rpwd": {
     
			equalTo: "          ",
		}
	}
});

ps:したがって、プロンプト情報は対応するエラーが発生した後、ページで自動的に生成されます.
ps:エラーメッセージは、ページ自動生成の ラベルに格納されます.
ps:なのでcssでlable.error{}のスタイルを設定すればヒントスタイルを設定できます
カスタム検証の追加(正規表現検証)

//                       
rules: {
     
	"input1": {
      
		"required": true, 
		"regx": /^\d{
     15}$)|(^\d{
     18}$)|(^\d{
     17}(\d|X|x)$/  //          
	}
},
messages: {
      
	"input1": {
     
		"required": "         ",
		"regx": "       ，         ！" //         
	}
}

/**************************************
 * aim:             （    ）
 * @param {Object}   value         
 * @param {DOM}      element         DOM  ，input  
 * @param {String}   param                ，            
 * @return {Boolean}             ： false     ，       | true     
 **********************************/
$.validator.addMethod("regx", function(value, element, param) {
     
	return param.test(value); //   false       ，      
}, "     ：  ，      ");

フォーム検証をアクティブにトリガー

$("#subBtn").click(function () {
     
	$("#form").validate();
	if ($("#form").valid()) {
     
		// ...   ajax
	}
});

注意ここではvalidate()&valid()を呼び出す必要があります.フォームの検証をトリガーし、2つのメソッドを同時に呼び出すことができますよ!!!
エラーメッセージの表示位置の変更

rules:{
     
	...
	errorPlacement: function(error, element) {
      //           
		 // error:        ， error[0].innerHTML ：          
		 // element：        (input    )
	},
	success: function (a, b){
      //           
		
	}
	...
}

ps:一般的にエラーのプロンプト位置をカスタマイズする必要がある場合は、errorPlacementを追加するだけでよいps:しかし、入力された情報が正しい場合、エラーのプロンプト情報も削除されない場合は、functionで何もしなくてもsuccessを追加してみましょう
最後に、関連する検証ルールと関連操作を添付します.