[jQuery]使用jQuery.Validate进行客户端验证（高级篇-下）——不使用微软验证控件的理由
2011-12-01 10:59
846 查看
继续上一篇文章使用
jQuery.Validate进行客户端验证（高级篇-上），本文将继续介绍jQuery.Validate的高级应用——jQuery.Validate的AJAX验证及简单扩展。
今天主要介绍的内容有：
1、如何使用jQuery.Validate进行AJAX验证?
2、默认jQuery.Validate在进行AJAX验证时返回必须是bool类型，如何返回一个对象包括错误消息及验证结果？
3、在反复使用jQuery.Validate进行AJAX验证时，总是需要编写相关AJAX参数，可否进行进一步封装？
第一点：如何使用jQuery.Validate进行AJAX验证?（具体见High-2.aspx）
jQuery.Validate为我们提供了一个方便的AJAX验证方式（封装了jQuery的AJAX，同时将jQuery的AJAX和jQuery.Validate的验证很好的结合在一起），在此我仅仅介绍jQuery.Validate在ASP.NET下如何进行AJAX验证，PHP、JSP等请查看官方例子。
我是采用jQuery.Validate+WebService进行AJAX验证，客户端编写jQuery.Validate的remote验证属性，服务器端采用WebSerice进行接收参数进行验证。
首先来看下jQuery.Validate的remote属性如何编写AJAX验证规则：
viewsourceprint?
11 | url:"WebService.asmx/CheckUid", |
13 | data:{uid:function(){returnjQuery("#<%=txtUid.ClientID%>").val();}} |
如果使用过jQuery.ajax的朋友肯定会很熟悉这段代码，jQuery.Validate的remote采用和jQuery.ajax相同的参数设置（原因就上面所说的封装了jQuery.ajax的原因）。
这边来详细讲解下jQuery.Validate的remote的一些知识：
1、jQuery.Validate的remote默认可以直接填写远程验证的地址，格式为：remote:”validate.aspx”，但是很多情况下这个远程验证需要提交参数、返回类型等限制，所以就可以采用在“{}”中编写具体属性的方式来包装提交参数。
2、jQuery.Validate的remote官方代码中，远程的输出只能是true或者false，不允许有其他输出，这个我觉得不太好，具体的扩展在后面我会讲到。
3、jQuery.Validate的remote在使用时如果想提交参数需要以JSON的方式提交格式如下：
viewsourceprint?
3 | returnjQuery("#<%=txtUid.ClientID%>").val(); |
此处肯定会有人不明白，为什么参数需要以function的形式提交，而不是直接写
jQuery("#<%=txtUid.ClientID%>").val();
这里我要说明的是：jQuery.Validate的验证规则是在页面加载的时候就已经被加载了的，如果还是像以往一样直接写"jQuery("#<%=txtUid.ClientID%>").val();"，那么验证的时候提交给服务器端的数据永远是页面加载时txtUid控件的值。
而使用function的好处就是在页面加载的时候仅仅告诉jQuery.Validate，在控件需要进行remote验证的时候需要调用function这个函数，这样就保证了在执行remote验证的时候可以获取到最新的值
我还修改了jQuery.Validate的remote方法，先来看下我修改的代码（
具体见scripts/jquery.validate1.js896行）：
viewsourceprint?
01 | if(previous.old!==value){ |
04 | this.startRequest(element); |
06 | data[element.name]=value; |
09 | url:param.url,//获取param验证规则中所写路径 |
11 | port:"validate"+element.name, |
15 | data:param.data||data,//获取param.data或data中所提交的参数 |
16 | success:function(response){ |
这边我修改了url和data的获取方式，主要是因为在真正执行的时候，变量url是空的，所以需要从param中获取。
而data为什么要改成param.data||data，主要原因就是下面这句代码：
data[element.name]=value;
这句代码的意思就是：为哪个控件设置远程验证就获取哪个控件的值，但是在实际的开发中，当遇到进行AJAX验证的时候会出现需要同时提交多个数据的情况，此时这句代码就是错误的了，所以需要改成
param.data||data，这样就能保证在提交多个数据的时候以多个数据为准。
下面来看下webservice的代码：
viewsourceprint?
2 | public bool CheckUid( string uid) |
4 | return uid== "testuid" ? true : false ; |
相当的简单，就是判断下用户名是不是指定的用户名。
注意：webservice.cs中必须将[System.Web.Script.Services.ScriptService]这个特性取消注释，否则AJAX验证将无效！第二点：
默认jQuery.Validate在进行AJAX验证时返回必须是bool类型，如何返回一个对象包括错误消息及验证结果？（
具体见App_Code/WebService.cs/CheckUid）
在第一点中介绍jQuery.Validate知识的时候就提到了，jQuery.Validate默认直接收true或false，但是在具体的开发中，我们会分层开发，三层或者多层，webservice在接收到验证请求后不做具体的处理直接调用逻辑层的验证方法，交由逻辑层进行验证操作（
当然你也可以把验证全部写在webservice中，但是这样就体现不出分层的好处了），此时的验证会产生多种情况，以最常见的用户名验证为例：
1）用户名已存在，此时的消息应该是“
用户名已存在，请重新输入！”
2）用户名不符合规则，此时的消息应该是“
用户名不符合规则，请重新输入！”
3）验证时出现程序异常，此时的消息应该是“
程序出现异常，请联系管理员！”
可以看出，仅仅一个用户名验证就会出现这3种信息，如果不返回一个明确的消息，仅仅告诉用户“用户名有误”，客户端的使用者将会相当的痛苦，因为使用者并不知道他的用户名输入到底错在哪了。
所以为了更好的客户体验，以及项目的合理性，我们在服务器端封装一个实体类（
具体见AppCode/AjaxClass），代码如下：
viewsourceprint?
4 | public string Msg{get ; set ;} |
5 | public int Result{get ; set ;} |
