JQuery 插件validate 简单使用简介-优快云博客

本文详细介绍如何使用 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、进入登录页面，不输入信息、点击登录，在文本框后面会给出提示信息。到此validate.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属性的值，checkExpireControl1 ："tempProduct.productQualityAssuranceDay", checkExpireControl1 是：校验规则的名称，"tempProduct.productQualityAssuranceDay" 是参数，对应 $.validator.methods.checkExpireControl1 = 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代码：