这一期我们先讲在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

下面就是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",		errorPlacement: function(error, element){			error.appendTo(element.parent().find(".tipinfo"));		},success:"valid"	});}

引入之后，我们在调用的页面里面还要加上

调用的html如下

     
	
      
		       
        
			         
会员登录名：
			         
								
          
			
		        
		        
			         
密码：
			         
								
          
			
		        
		        
			         
再次输入密码：
			         
								
          
			
		        
		        
			         
公司名称：
			         
								
          
			
		        
		        
			         
手机号码：
			         
								
          
			
		        
		        
			         
邮编：
			         
								
          
			
		        
		        
			         
			         
同意以下服务条款并注册
		        
	       
      
	
     

 

 

最后，附带一下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.Validate进行客户端验证——不使用微软验证控件的理由写完了，总共5篇，可能还有许多不足，欢迎大家的指点！

以下为具体的目录，方便大家的查看：

1、

内容：为何选用jQuery.Validate进行客户端验证、jQuery.Validate的使用环境和使用jQuery.Validate进行简单的客户端验证。

2、

内容：jQuery.Validate的三种验证方式，同时对比列出了3种验证的优点及缺点，方便大家在实际开发中选取使用。

3、

内容：根据我在做项目时候碰到的问题总结介绍了jQuery.Validate在使用过程中经常会遇到的问题。

4、

内容：介绍了使用jQuery.Validate如何进行扩展验证和分组验证的实现方法。

5、

内容：介绍了jQuery.Validate的AJAX验证方式，并对jQuery.Validate的AJAX验证进行修改及扩展，使得jQuery.Validate的AJAX验证可以支持从服务器端获取验证消息，同时还对jQuery.Validate的AJAX进行简单封装，简化了正常开发。

源代码下载：（已包含初级篇到高级篇所有实例）

注意：我实例中使用的版本为1.5.2，和1.7版本的代码有所不同，所以我实例中的扩展及修改可能无法适用于1.7！

官网地址：

最新版本：1.7

新版本中增加了:

1、additional-methods.js-官方提供的扩展验证方法

2、一个新的DEMO:themerollered.html

如果想研究新的东西可以去下载最新的。