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> 密 码: <s:password cssClass="input" tabindex="2" maxlength="20" size="37" name="userDto.userpassword" /> <br> 类 型: <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、更多信息可以参考:
相关推荐
这是一个关于jquery_validate插件学习的总结,内容不多,但是都是干货,有兴趣的可以看一下。
**jQuery的validate插件使用详解** jQuery的validate插件是一款强大的表单验证工具,它能够帮助开发者轻松地实现用户输入的验证,确保数据的正确性和完整性。基于jQuery库,validate插件提供了丰富的功能,包括内置...
jquery.validate.min.js jquery jquery验证插件 validate
综上所述,jQuery.validate插件通过简单的配置就能实现强大的表单验证功能,无论是基本的规则验证还是复杂的异步验证,都能轻松应对。在实际应用中,根据项目需求进行适当定制,能大大提高开发效率和用户体验。
jQuery Validate是一款由Jörn Zaefferer开发的jQuery插件,主要用于表单验证。它提供了丰富的验证规则和自定义消息功能,使得开发者能够轻松创建出直观且易于理解的用户交互体验。 二、快速上手 1. 引入依赖库 ...
jQuery.validate插件是一个强大的、易于使用的JavaScript库,它使得在jQuery环境下进行表单验证变得简单而高效。本文将深入探讨jQuery.validate的使用方法以及源码解析,帮助开发者更好地理解和运用这一工具。 首先...
**jQuery validate 和 form 插件详解** 在网页开发中,用户界面的交互性和数据验证是不可或缺的部分。jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。`jQuery validate` 和 `...
1. **易于使用**:jQuery Validate 插件通过简单的链式调用,即可实现各种验证规则的设置。 2. **内置验证规则**:包括必填项(required)、电子邮件(email)、数字(number)、URL等,满足大多数基本需求。 3. **...
在这个压缩包中,我们重点探讨的是几个基于 jQuery 的核心插件,它们分别是:jQuery UI、jQuery Form、jQuery Validate 和 jQuery vsdoc。 1. **jQuery UI** jQuery UI 是一个扩展了 jQuery 功能的开源库,提供了...
《jQuery Validate验证框架详解与JS应用》 在Web开发中,表单验证是不可或缺的一环,它确保...同时,提供的`validate.js`和`jquery.validate.zip`文件包含了完整的jQuery Validate插件,供开发者直接使用或参考学习。
1. **内置验证规则**:jQuery.validate.js内建了一系列常见的验证规则,如非空、邮箱格式、电话号码、URL等,只需简单配置就能实现基本的验证功能。 2. **错误提示**:当用户输入不符合规则时,jQuery.validate.js...
在网页开发中,jQuery Validate 是一个非常常用的验证插件,用于对用户输入的数据进行校验,确保数据的有效性和完整性。这个插件可以帮助开发者创建复杂的表单验证规则,提高用户体验,减少服务器端的压力。结合 ...
在使用jQuery.validate之前,你需要先引入jQuery库,因为validate是基于jQuery构建的。通常,你会在HTML文件中添加如下代码来引入jQuery和validate库: ```html <script src="path/to/jquery.js" type="text/...
在使用validate插件前,需先引入jQuery库和validate插件本身。例如,我们可以引入名为`jquery-validation-1.9.0`的压缩包,其中包含了validate插件的主要文件。该版本的插件包含`jquery.validate.js`主文件,以及...
微软的jquery.validate.unobtrusive.js验证插件,可以用来验证单选和多选框的.
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
jquery.validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
jQuery Validate 插件依赖 jQuery 库,使用前需要先导入 jQuery的 js 文件,再导入 jquery.validate.js 插件,可以再导入中文提示信息文件 messages_zh.js