[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等，這些就須要你們在使用的過程當中本身查看源代碼實驗了。

二、本文有點長，並且內容比較多，若是文中有什麼錯誤或者有指導意見歡迎你們提出來，謝謝了！

源代碼下載：點我下載