aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲
上面是效果，下面来说使用步骤
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脚本，但好处是可以统一验证规范，将每个页面的验证规则都写在头部的脚本中，方便日后维护。
下面我们就用第三种方法来演示一下
提前准备条件是：
(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>
/** * @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);
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
如果想研究新的东西可以去下载最新的。
