`
bo_hai
  • 浏览: 564606 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

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代码:

 

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


  8、更多信息可以参考:

    http://jqueryvalidation.org/jQuery.validator.addMethod/

    http://hi.baidu.com/7xwang/item/68bfc047dfe9e9dbc0a59218

1
1
分享到:
评论

相关推荐

    jquery_validate插件总结

    这是一个关于jquery_validate插件学习的总结,内容不多,但是都是干货,有兴趣的可以看一下。

    jQuery的validate插件使用整理

    **jQuery的validate插件使用详解** jQuery的validate插件是一款强大的表单验证工具,它能够帮助开发者轻松地实现用户输入的验证,确保数据的正确性和完整性。基于jQuery库,validate插件提供了丰富的功能,包括内置...

    jquery.validate.min.js

    jquery.validate.min.js jquery jquery验证插件 validate

    Jquery.validate插件使用方法

    综上所述,jQuery.validate插件通过简单的配置就能实现强大的表单验证功能,无论是基本的规则验证还是复杂的异步验证,都能轻松应对。在实际应用中,根据项目需求进行适当定制,能大大提高开发效率和用户体验。

    jquery.validate 使用

    jQuery Validate是一款由Jörn Zaefferer开发的jQuery插件,主要用于表单验证。它提供了丰富的验证规则和自定义消息功能,使得开发者能够轻松创建出直观且易于理解的用户交互体验。 二、快速上手 1. 引入依赖库 ...

    jQuery.validate 用法

    jQuery.validate插件是一个强大的、易于使用的JavaScript库,它使得在jQuery环境下进行表单验证变得简单而高效。本文将深入探讨jQuery.validate的使用方法以及源码解析,帮助开发者更好地理解和运用这一工具。 首先...

    Jquery validate和form插件

    **jQuery validate 和 form 插件详解** 在网页开发中,用户界面的交互性和数据验证是不可或缺的部分。jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。`jQuery validate` 和 `...

    jquery.validate1.7验证插件最新版

    1. **易于使用**:jQuery Validate 插件通过简单的链式调用,即可实现各种验证规则的设置。 2. **内置验证规则**:包括必填项(required)、电子邮件(email)、数字(number)、URL等,满足大多数基本需求。 3. **...

    Jquery插件,JqueryUI,JqueryForm,JqueryValidate,Jqueryvsdoc

    在这个压缩包中,我们重点探讨的是几个基于 jQuery 的核心插件,它们分别是:jQuery UI、jQuery Form、jQuery Validate 和 jQuery vsdoc。 1. **jQuery UI** jQuery UI 是一个扩展了 jQuery 功能的开源库,提供了...

    jquery-validate验证框架使用详解及JS文件

    《jQuery Validate验证框架详解与JS应用》 在Web开发中,表单验证是不可或缺的一环,它确保...同时,提供的`validate.js`和`jquery.validate.zip`文件包含了完整的jQuery Validate插件,供开发者直接使用或参考学习。

    jQuery.validate.js

    1. **内置验证规则**:jQuery.validate.js内建了一系列常见的验证规则,如非空、邮箱格式、电话号码、URL等,只需简单配置就能实现基本的验证功能。 2. **错误提示**:当用户输入不符合规则时,jQuery.validate.js...

    jquery validate 信息气泡提示

    在网页开发中,jQuery Validate 是一个非常常用的验证插件,用于对用户输入的数据进行校验,确保数据的有效性和完整性。这个插件可以帮助开发者创建复杂的表单验证规则,提高用户体验,减少服务器端的压力。结合 ...

    jQuery.validate验证

    在使用jQuery.validate之前,你需要先引入jQuery库,因为validate是基于jQuery构建的。通常,你会在HTML文件中添加如下代码来引入jQuery和validate库: ```html &lt;script src="path/to/jquery.js" type="text/...

    jquery的validate表单校验插件

    在使用validate插件前,需先引入jQuery库和validate插件本身。例如,我们可以引入名为`jquery-validation-1.9.0`的压缩包,其中包含了validate插件的主要文件。该版本的插件包含`jquery.validate.js`主文件,以及...

    jquery.validate.unobtrusive.js

    微软的jquery.validate.unobtrusive.js验证插件,可以用来验证单选和多选框的.

    jquery-validate-1.4.0

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...

    jquery.validate-1.13.1.js

    jquery.validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...

    jQuery Validate 表单校验插件.zip

    jQuery Validate 插件依赖 jQuery 库,使用前需要先导入 jQuery的 js 文件,再导入 jquery.validate.js 插件,可以再导入中文提示信息文件 messages_zh.js

Global site tag (gtag.js) - Google Analytics