aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
2013-10-22 14:50
1481 查看
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲
上面是效果,下面来说使用步骤
jQuery.Validate为我们提供了3种验证编写方式,各有优缺点:
1、在input对象中书写class样式指定验证规则或属性验证规则:
2、同第1条,这种验证规则方式也是在input对象中书写class样式,只不过书写的方式改为了JSON格式,但是这种方式提供了自定义验证消息的支持:
3、这种方式使用纯JS的方式:
下面我们就用第三种方法来演示一下
提前准备条件是:
(1):引入Jquery脚本 jquery-1.4.2.min.js
(2):引入Validate脚本 jquery.validate.js
(3):引入validate的扩展脚本validate_expand.js(也是我们自己手写的,符合中国国情的一些验证,例如大陆手机,电话区号等等)
这个也是最常用的,也就是除了上面的3个脚本需要引入之外,还需要引入我们自己写的规则 validateRules.js
下面就是validateRules.js的源码 也就是我们自己需要的验证哪些东西
引入之后,我们在调用的页面里面还要加上
调用的html如下
最后,附带一下jquery.validate的扩展脚本 validate_expand.js ,有了这个,就可以自定义一下validate没有的验证了,更符合中国国情一些的验证,addMethod(name,method,message)是用来添加自定义的验证规则,示例如下:
常见的问题
1:显示的英文提示 ,没有中文
我们查看下jQuery.Validate源代码,在236行果然有提示消息的定义方式,我们就可以进行修改这边的消息改成中文的方式,或者自定义了一个中文的消息jQuery.Validate.message_cn.js,然后使用jQuery.extend来覆盖jQuery.Validate自身的消息,代码如下:
这样只需在页面里面引用下jQuery.Validate.message_cn.js就可以把原有的英文提示给替换掉了,2种方式(修改原来的英文或者是自己添加中文)都是可取的,如果你想把jQuery.Validate改造成适合自己的验证控件就是用第1种方式直接改源代码,如果你只是想用些基本功能不想动原来的源代码就是用第2种方法。
2:在ASP.NET中按钮都会解析成submit所有都会触发验证,如果想让某个按钮不触发验证可以加上这个样式:class="cancel"
3:如果不想提交只想调试一下呢? debug:true
4:jQuery.Validate仅能做客户端验证,并不能代替服务器端验证,为了系统的安全所以服务器端还是要进行验证的。
附带一个牛人写的全集介绍 [jQuery]使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由-目录及简介
花了一个多星期的时间总算把这使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由写完了,总共5篇,可能还有许多不足,欢迎大家的指点!
以下为具体的目录,方便大家的查看:
1、[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
内容:为何选用jQuery.Validate进行客户端验证、jQuery.Validate的使用环境和使用jQuery.Validate进行简单的客户端验证。
2、[jQuery]使用jQuery.Validate进行客户端验证(中级篇-上)——不使用微软验证控件的理由
内容:jQuery.Validate的三种验证方式,同时对比列出了3种验证的优点及缺点,方便大家在实际开发中选取使用。
3、[jQuery]使用jQuery.Validate进行客户端验证(中级篇-下)——不使用微软验证控件的理由
内容:根据我在做项目时候碰到的问题总结介绍了jQuery.Validate在使用过程中经常会遇到的问题。
4、[jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由
内容:介绍了使用jQuery.Validate如何进行扩展验证和分组验证的实现方法。
5、[jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
内容:介绍了jQuery.Validate的AJAX验证方式,并对jQuery.Validate的AJAX验证进行修改及扩展,使得jQuery.Validate的AJAX验证可以支持从服务器端获取验证消息,同时还对jQuery.Validate的AJAX进行简单封装,简化了正常开发。
源代码下载:点我下载(已包含初级篇到高级篇所有实例)
注意:我实例中使用的版本为1.5.2,和1.7版本的代码有所不同,所以我实例中的扩展及修改可能无法适用于1.7!
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
最新版本:1.7
新版本中增加了:
1、additional-methods.js-官方提供的扩展验证方法
2、一个新的DEMO:themerollered.html
如果想研究新的东西可以去下载最新的。
上面是效果,下面来说使用步骤
jQuery.Validate为我们提供了3种验证编写方式,各有优缺点:
1、在input对象中书写class样式指定验证规则或属性验证规则:
如<input type=”text” class=”required”/>
最简单、最便捷,提示消息使用jQuery.Validate的内置的消息(自定义扩展验证规则也属于此项),但是由于是以样式名的方式进行验证,导致了日后修改必须找到相应的input对象,同时无法使用高级验证规则,具体说明请向下看2、同第1条,这种验证规则方式也是在input对象中书写class样式,只不过书写的方式改为了JSON格式,但是这种方式提供了自定义验证消息的支持:
如<input type=”text” class="{required:true,minlength:5,,messages:{required:'请输入内容'}”/>
简单、方便,但个人认为有点臃肿,还是和第1条一样和相对应的input对象纠缠在一起,并且还增加消息自定义,使得input对象变的更大了,干扰了页面代码的阅读,但可以使用高级验证规则(实际就是将第3种JS以JSON的格式放到具体的class中3、这种方式使用纯JS的方式:
如:
$().ready(function() {
$("#aspnetform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
})
})
很好的解决了HTML和验证规则的分离,就是书写较为麻烦,需要单独写JS脚本,但好处是可以统一验证规范,将每个页面的验证规则都写在头部的脚本中,方便日后维护。$().ready(function() {
$("#aspnetform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
})
})
下面我们就用第三种方法来演示一下
提前准备条件是:
(1):引入Jquery脚本 jquery-1.4.2.min.js
(2):引入Validate脚本 jquery.validate.js
(3):引入validate的扩展脚本validate_expand.js(也是我们自己手写的,符合中国国情的一些验证,例如大陆手机,电话区号等等)
这个也是最常用的,也就是除了上面的3个脚本需要引入之外,还需要引入我们自己写的规则 validateRules.js
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.validate.js"></script> <script language="javascript" type="text/javascript" src="js/validate_expand.js"></script> <script language="javascript" type="text/javascript" src="js/validateRules.js"></script>
下面就是validateRules.js的源码 也就是我们自己需要的验证哪些东西
/** * @author Administrator */ function initValidator(base){ $("#thisForm").validate({ onkeyup:false, //设置验证规则 rules: { "userName": { required: true, userNameCheck: true }, "passWord": { required: true, rangelength: [6, 12] }, "passWordAgain": { required: true, rangelength: [6, 12], equalTo: "#passWord" }, "corpName": { required: true }, "sms": { required: true, isMobile: true }, "email": { required: true, isEmail: true } }, //设置错误信息 messages: { "userName": { required: "请输入用户名", userNameCheck: "请输入4-20位字母开头的字母或数字和下划线" }, "passWord": { required: "请输入密码", rangelength: "密码长度为6-12位" }, "passWordAgain": { required: "请再次输入密码", rangelength: "密码长度为6-12位", equalTo: "两次输入密码不相同" }, "corpName": { required: "请输入公司名称" }, "sms": { required: "请输入手机号码", isMobile: "请输入有效的手机号码" }, "email": { required: "请输入邮箱", isEmail: "请正确填写邮箱格式" } }, errorElement:"font",//这个是表示,如果错误,我们要在错误的地方用什么标记来围住错误信息,这里是用<font></font> errorPlacement: function(error, element){ error.appendTo(element.parent().find(".tipinfo")); },success:"valid" }); }
引入之后,我们在调用的页面里面还要加上
<script type="text/javascript"> $(document).ready(function(){ initValidator(); }); </script>
调用的html如下
<form id="thisForm" method="post" action=""> <table width="100%"> <tr> <td class="tdcon">会员登录名:</td> <td> <input class="stext" type='text' name="userName" id="userName" value="" /> <div class="tipinfo"></div> </td> </tr> <tr> <td class="tdcon">密码:</td> <td> <input class="stext" type="password" name="passWord" id="passWord" value="" /> <div class="tipinfo"></div> </td> </tr> <tr> <td class="tdcon">再次输入密码:</td> <td> <input class="stext" type='password' name="passWordAgain" id="passWordAgain" value="" /> <div class="tipinfo"></div> </td> </tr> <tr> <td class="tdcon">公司名称:</td> <td> <input class="stext" type='text' name="corpName" id="corpName" value="" /> <div class="tipinfo"></div> </td> </tr> <tr> <td class="tdcon">手机号码:</td> <td> <input class="stext" type='text' name="sms" id="sms" value="" /> <div class="tipinfo"></div> </td> </tr> <tr> <td class="tdcon">邮编:</td> <td> <input class="stext" type='text' name="email" id="email" value="" /> <div class="tipinfo"></div> </td> </tr> <tr> <td></td> <td><button name="Submit" type="submit" class="Button BlueButton Button18">同意以下服务条款并注册</button></td> </tr> </table> </form>
最后,附带一下jquery.validate的扩展脚本 validate_expand.js ,有了这个,就可以自定义一下validate没有的验证了,更符合中国国情一些的验证,addMethod(name,method,message)是用来添加自定义的验证规则,示例如下:
/** * jquery.validate相关扩展验证 * validate_expand.js */ //验证用户名 jQuery.validator.addMethod("userNameCheck", function(value, element) { return this.optional(element) || /^[a-zA-Z]\w{4,20}$/.test(value); }, "请输入4-20位字母开头的字母或数字和下划线"); //字符验证 jQuery.validator.addMethod("stringCheck", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "只能包括中文字、英文字母、数字和下划线"); //邮政编码验证 jQuery.validator.addMethod("isEmail", function(value, element) { return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/.test(value); }, "请正确填写邮箱格式"); //手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /(^(13|14|15|18)\d{9}$)/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); //电话号码验证 jQuery.validator.addMethod("isTel", function(value, element) { var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678 return this.optional(element) || (tel.test(value)); }, "请正确填写您的电话号码"); //联系电话(手机/电话皆可)验证 jQuery.validator.addMethod("isPhone", function(value,element) { var length = value.length; var mobile = /(^(13|14|15|18)\d{9}$)|(^0(([1,2]\d)|([3-9]\d{2}))\d{7,8}$)/; var tel = /^\d{3,4}-?\d{7,9}$/; return this.optional(element) || (tel.test(value) || mobile.test(value)); }, "请正确填写您的联系电话");
常见的问题
1:显示的英文提示 ,没有中文
我们查看下jQuery.Validate源代码,在236行果然有提示消息的定义方式,我们就可以进行修改这边的消息改成中文的方式,或者自定义了一个中文的消息jQuery.Validate.message_cn.js,然后使用jQuery.extend来覆盖jQuery.Validate自身的消息,代码如下:
//定义中文消息 var cnmsg = { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"), minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"), rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.format("请输入一个最大为 {0} 的值"), min: jQuery.format("请输入一个最小为 {0} 的值") }; jQuery.extend(jQuery.validator.messages, cnmsg);
这样只需在页面里面引用下jQuery.Validate.message_cn.js就可以把原有的英文提示给替换掉了,2种方式(修改原来的英文或者是自己添加中文)都是可取的,如果你想把jQuery.Validate改造成适合自己的验证控件就是用第1种方式直接改源代码,如果你只是想用些基本功能不想动原来的源代码就是用第2种方法。
2:在ASP.NET中按钮都会解析成submit所有都会触发验证,如果想让某个按钮不触发验证可以加上这个样式:class="cancel"
3:如果不想提交只想调试一下呢? debug:true
4:jQuery.Validate仅能做客户端验证,并不能代替服务器端验证,为了系统的安全所以服务器端还是要进行验证的。
附带一个牛人写的全集介绍 [jQuery]使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由-目录及简介
花了一个多星期的时间总算把这使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由写完了,总共5篇,可能还有许多不足,欢迎大家的指点!
以下为具体的目录,方便大家的查看:
1、[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
内容:为何选用jQuery.Validate进行客户端验证、jQuery.Validate的使用环境和使用jQuery.Validate进行简单的客户端验证。
2、[jQuery]使用jQuery.Validate进行客户端验证(中级篇-上)——不使用微软验证控件的理由
内容:jQuery.Validate的三种验证方式,同时对比列出了3种验证的优点及缺点,方便大家在实际开发中选取使用。
3、[jQuery]使用jQuery.Validate进行客户端验证(中级篇-下)——不使用微软验证控件的理由
内容:根据我在做项目时候碰到的问题总结介绍了jQuery.Validate在使用过程中经常会遇到的问题。
4、[jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由
内容:介绍了使用jQuery.Validate如何进行扩展验证和分组验证的实现方法。
5、[jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
内容:介绍了jQuery.Validate的AJAX验证方式,并对jQuery.Validate的AJAX验证进行修改及扩展,使得jQuery.Validate的AJAX验证可以支持从服务器端获取验证消息,同时还对jQuery.Validate的AJAX进行简单封装,简化了正常开发。
源代码下载:点我下载(已包含初级篇到高级篇所有实例)
注意:我实例中使用的版本为1.5.2,和1.7版本的代码有所不同,所以我实例中的扩展及修改可能无法适用于1.7!
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
最新版本:1.7
新版本中增加了:
1、additional-methods.js-官方提供的扩展验证方法
2、一个新的DEMO:themerollered.html
如果想研究新的东西可以去下载最新的。
相关文章推荐
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理
- 使用jquery.validate.js插件进行表单里控件的验证
- KISSYUI的表单前端js验证和JQuery扩展插件Validate
- 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
- 使用jquery.validate.min.js插件进行表单验证并自定义校验规则
- jquery表单验证插件(jquery.validate.js)的3种使用方式
- 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
- Jquery.validate.js表单验证插件的使用
- jQuery插件 -- 表单验证插件 jQuery.validate.js
- jQuery的validate.js表单验证插件
- 使用validate.js实现表单数据提交前的验证方法
- 使用jQuery validate插件验证表单
- jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则
- Jquery.from.js表单提交插件使用说明
- jquery validate插件前端表单验证插件的使用
- jquery表单验证框架 jquery.validate.min.js的使用
- jQuery表单验证插件——jquery.validate.js
- Form表单利用Jquery Validate验证以及ajax提交
- jQuery.Validate表单验证插件的使用示例详解
- jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).