[jQuery]使用jQuery.Validate进行客户端验证（高级篇-下）——不使用微软验证控件的理由

引用源：http://www.cnblogs.com/kyo-yo/archive/2010/07/06/Use-jQuery-Validate-To-Being-Client-Validate-High-2.html

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），代码以下：

?

1 2 3 4 5 6

[Serializable] public  class  AjaxClass {      public  string  Msg { get ; set ; }      public  int  Result { get ; set ; } }

就是一个最简单的实体类，有2个属性，Msg和Result，Msg用于存放验证失败的信息，Result用于存放结果。

 

看下WebSerivce的代码如何修改：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

[WebMethod] public  AjaxClass CheckUid( string  uid) {      //return uid == "testuid" ? true : false;      AjaxClass ajaxClass = new  AjaxClass();      try      {          if  (uid == "testuid" )          {              ajaxClass.Msg = "用户名已存在,请从新输入!" ;              ajaxClass.Result = 0;          }          else  if  (uid.IndexOf( "test" ) == -1)          {              ajaxClass.Msg = "用户名格式不正确,用户名必须包含test,请从新输入!" ;              ajaxClass.Result = 0;          }          else          {              ajaxClass.Msg = "格式正确!" ;              ajaxClass.Result = 1;          }      }      catch      {          ajaxClass.Msg = "程序出现异常,请联系管理员!" ;          ajaxClass.Result = 0;      }      return  ajaxClass; }

上面的WebService就完整的实现了我先前说的3种错误状况（因为这边仅仅是例子因此就只有表示层，实际开发中须要分层开发，此代码应该放入业务逻辑层）

注意：在webservice返回值前，若是检查成功必需要为ajaxClass.Result = 1，不然客户端验证会没法经过。

虽然完成了服务器端的代码修改，可是直接运行页面仍是会出错，这是由于我上面所说过的，jQuery.Validate的remote远程的输出只能是true或者false，咱们来看下具体的代码，其中注释掉的就是原来官方的代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

success: function(response) {      if (response.Result) {//if(response){          var submitted = validator.formSubmitted;          validator.prepareElement(element);          validator.formSubmitted = submitted;          validator.successList.push(element);          validator.showErrors();      } else {          var errors = {};          //errors[element.name] = response.Result || validator.defaultMessage(element, "remote");          errors[element.name] = response.Msg;          validator.showErrors(errors);      }      previous.message = response.Msg; //previous.valid = response;      previous.valid = response.Result;      validator.stopRequest(element, response.Result); }

能够看到一共修改了3处地方：

一、判断返回值，原来是直接判断response，如今则是判断response.Result，由于如今的response已是一个包含消息及结果的对象了。

二、错误消息，原来的错误消息是直接获取默认配置好的消息，我这边是获取response.Msg。

三、设置previous对象，将previous对象的消息和结果设置为AJAX返回的消息和结果，以供jQuery.Validate下面代码的返回。

这样jQuery.Validate的remote的方法就修改了，可是并无结束，缘由是先前在AJAX提交参数的时候因为jQuery.Validate的验证规则的缘故，提交的参数并非以JSON的格式提交的而是以{uid:function()}这样的方式，结果就致使了没法设置jQuery.AJAX的contentType:"application/json; charset=utf-8"，若是设置了会出现如下错误：

这样从webservice返回的AjaxClass对象就没法像以往的JSON方式直接操做了，因此咱们只能换一种格式——XML，由于webservice默认返回的数据是XML格式：

?

1 2 3 4 5

<? xml  version = "1.0"  encoding = "utf-8"  ?> - < AjaxClass  xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"  xmlns:xsd = "http://www.w3.org/2001/XMLSchema"  xmlns = "http://tempuri.org/" >    < Msg >用户名格式不正确,用户名必须包含test,请从新输入!</ Msg >    < Result >0</ Result >    </ AjaxClass >

接下来看下具体的remote方法应该如何编写，设置dataType:”xml”，而后将XML数据转换成一个对象以供上面我修改的jQuery.Validate的remote方法中ajaxsuccess的使用，具体看一下代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

remote:{      type: "POST",      dataType:"json",      async: false,      url: "WebService.asmx/CheckUid",      data: {uid:function(){ return jQuery("#<%=txtUid.ClientID %>").val();}},      dataFilter: function(dataXML) {          var result = new Object();          result.Result = jQuery(dataXML).find("Result").text();          result.Msg = jQuery(dataXML).find("Msg").text();          if (result.Result == "-1") {              result.Result = false;              return result;          }          else {              result.Result = result.Result == "1" ? true : false;              return result;          }      } }

就是jQuery.Ajax方法dataFilter，能够在AJAX请求成功后将数据进行过滤处理，这里我就使用了jQuery方法把结果和消息从XML中获取出来直接赋给一个对象，再将这个对象返回，交由ajaxsuccess使用。

这样就算是完成了修改jQuery.Validate的remote方法，使得能够返回验证结果及验证消息，看下效果图：

 

第三点：在反复使用jQuery.Validate进行AJAX验证时，老是须要编写相关AJAX参数，能否进行进一步封装？（具体见High-3.aspx和jquery.validate.extension.js）

在开发一个系统的时候常常会用到AJAX的验证，而若是每次都要编写上面那么多的代码仍是很不方便，因此我如今就来进行一下简单的封装，代码以下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

//远程验证抽象方法 function GetRemoteInfo(postUrl, data) {      var remote = {          type: "POST",          async: false,          url: postUrl,          dataType: "xml",          data: data,          dataFilter: function(dataXML) {              var result = new Object();              result.Result = jQuery(dataXML).find("Result").text();              result.Msg = jQuery(dataXML).find("Msg").text();              if (result.Result == "-1") {                  result.Result = false;                  return result;              }              else {                  result.Result = result.Result == "1" ? true : false;                  return result;              }          }      };      return remote; }

这个函数主要接收2个参数，一个是远程验证的路径和须要提交的参数，返回包装好的remote对象。

页面调用也很简单，代码以下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<script src="scripts/jquery.validate.extension.js" type="text/javascript"></script>      <script type="text/javascript">          function InitRules() {              var dataInfo = {uid:function(){ return jQuery("#<%=txtUid.ClientID %>").val();}};              var remoteInfo = GetRemoteInfo('WebService.asmx/CheckUid', dataInfo);                opts = {               rules:                  {                      <%=txtUid.UniqueID %>:                      {                          required: true,                          remote:remoteInfo                      }                  }              }          }      </script>

怎么样？相比上面的代码一会儿干净了不少吧？

页面上只要作3步操做：

一、包装好须要提交的data对象。

二、将远程验证地址和包装好的data对象传递给封装好的方法获取remote对象。

三、将函数返回的remote对象放入规则中。

 

至此使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由这一系列就算所有写完了，大致上将jQuery.Validate在ASP.NET上的一些常见应用讲了一下，同时也提出了许多我本身修改扩展的东西，但愿对正在苦恼客户端验证的朋友有所帮助，谢谢你们的支持了！

PS：一、其实这一系列并无把jQuery.Validate的全部功能介绍完，好比onfocusin，onfocusout，onkeyup等，这些就须要你们在使用的过程当中本身查看源代码实验了。

二、本文有点长，并且内容比较多，若是文中有什么错误或者有指导意见欢迎你们提出来，谢谢了！

源代码下载：点我下载