JQueryプラグインvalidateの簡単な使用の概要

1、まずページに使用するJSファイルを導入します.コードは以下の通りです.

<script language="javascript" type="text/javascript" src="<%=basePath%>JQuery/jquery-1.6.js"></script>
<script language="javascript" type="text/javascript" src="<%=basePath%>JQuery/jquery.validate.js"></script>
<script language="javascript" type="text/javascript" src="<%=basePath%>JQuery/jquery.form.js"></script>
<script language="javascript" type="text/javascript" src="<%=basePath%>js/Login.js"></script>

 jquery-1.6.js 、jquery.validate.js、jquery.form.jsはすべて管理側のウェブサイトの上でダウンロードすることができて、ダウンロードの方法は難しくなくて、ここで紹介しません.
2、JSPの内容は以下の通りです.

<s:form action="bbs/doLogin.action" name="loginForm" id="loginForm">
	<br />
	<div align="center">
		   :
		<s:textfield cssClass="input" tabindex="1" maxlength="20" size="35" name="userDto.username" />
		<br>
		  &nbsp;&nbsp; :
		<s:password cssClass="input" tabindex="2" maxlength="20" size="37" name="userDto.userpassword" />
		<br>
		   :&nbsp;&nbsp;
		<s:radio tabindex="3" list="#{'1':'    ','2':'   ' }" listKey="key" listValue="value" name="userDto.flag" value="'1'"></s:radio>
		<br>
		   :
		<s:textfield cssClass="input" tabindex="4" maxlength="20" size="35" name="userDto.randcode" />
		<br>
		<img src="authImg">
		<br>
		<font color="red"><s:actionerror /></font>
		<br>
		<s:submit cssClass="btn" tabindex="5" value="   " />
	</div>
</s:form>

 
3、validateを使います.jsはページ上の必須項目を検証し、必須項目にはユーザー名、パスワード、検証コードがあります.検査JSコードはLoginに書いてある.jsでは、内容は以下の通りです.

$(document).ready(function(){
	setFormValidate();
});

//     ，      
function doNext() {
	$('#loginForm')[0].submit();
}
function setFormValidate() {
	$.validator.setDefaults({
		submitHandler: function(){
			doNext();
		}
	});
	/** loginForm      ID */	
	validator = $("#loginForm").validate({
		rules:{
			/*       name      */
			"userDto.username":{
				required:true						
			},
			"userDto.userpassword":{
				required:true
			},
			"userDto.randcode":{
				required:true
			}
		},
		messages: {
			/**   name         */
			"userDto.username": {required:"       "},
			"userDto.userpassword": {required:"       "},
			"userDto.randcode": {required:"       "}
		},
		alertError:true
	});
}

4、ログインページに入り、情報を入力せずにログインをクリックすると、テキストボックスの後ろにヒントが表示されます.ここまでだjsの簡単な応用はもうできました.
5、次にvalidateについて議論します.js高度な応用.適用シーン:ページ上のテキストボックスのチェックは、記入するかどうかに限らず、テキスト情報に対してより高い要求がある可能性があります.validate.jsも満足できます.コードを参照:

// rules   
"tempProduct.batchRuleId": {
	checkExpireControl1: "tempProduct.productQualityAssuranceDay",
	checkExpireControl2: "tempProduct.productQualityAssuranceDay",
	checkExpireControl3: "tempProduct.userExpireControl",
	checkExpireControl4: "tempProduct.userExpireControl"
},
// messages     
"tempProduct.batchRuleId": {
 
	checkExpireControl1:"         ,        ",
 
	checkExpireControl2:"         ,        ",
 
	checkExpireControl3:"          ,         ",
 
	checkExpireControl4:"           ,         "

},

$.validator.methods.checkExpireControl1 = function(value, element, param){
	if(value == 1 && $("input[name="+param+"]").val()<=0) {
		return false;
	}
	return true;
};

$.validator.methods.checkExpireControl2 = function(value, element, param){
	....
};	


$.validator.methods.checkExpireControl3 = function(value, element, param){
	....
};

$.validator.methods.checkExpireControl4 = function(value, element, param){
	....
};

注記:「tempProduct.batchRuleId」はテキストボックスname属性の値、checkExpireControl 1:「tempProduct.productQualityAssurance Day」、checkExpireControl 1は:検証ルールの名前、「tempProduct.productQualityAssurance Day」はパラメータ、対応$です.validator.methods.checkExpireControl 1=function(value,element,param)のparamで、チェックメソッドはfalseを返し、ページにヒント情報を表示します.
6、validate.jsはまた別の検証方式をサポートし、コードは以下の通りである.

//  rules      ，     message
'tempProduct.holdPmPrice.productNonMemberPrice':{
	productNonMemberPriceCheck: true,
	range: [0.01, 999999999.99]
},

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

  var productTyperadio = $("input:radio[name='tempProduct.productTypeRadio']:checked").val();
  
  if (parseInt(productTyperadio) == 0){
  return $.trim(value) != '';
 } else {
  return true;
 }
},
"    ");  

//             
// productNonMemberPriceCheck: "paraName",
jQuery.validator.addMethod("productNonMemberPriceCheck", function(value, element,param) {

  var productTyperadio = $("input:radio[name='tempProduct.productTypeRadio']:checked").val();
  
  if (parseInt(productTyperadio) == 0){
  return $.trim(value) != '';
 } else {
  return true;
 }
},
"    ");  


 

7、ここで皆さんとページの上部に戻るJSコードを共有します.
 

$(window.parent).scrollTop(0);

8、その他の情報は以下の通りです.
    http://jqueryvalidation.org/jQuery.validator.addMethod/
    http://hi.baidu.com/7xwang/item/68bfc047dfe9e9dbc0a59218