ASP.NET MVC的客戶端驗證：jQuery的驗證

之前我們一直討論的Model驗證僅限于服務端驗證，即在Web服務器根據相應的規則對請求數據實施驗證。如果我們能夠在客戶端（瀏覽器）對用戶輸入的數據先進行驗證，這樣會減少針對服務器請求的頻率，從而緩解Web服務器訪問的壓力。在ASP.NET MVC 3.0中，jQuery驗證框架被引入是我們可以采用Unobtrusive JavaScript的方式進行客戶端驗證。

之前我們一直討論的Model驗證僅限于服務端驗證，即在Web服務器根據相應的規則對請求數據實施驗證。如果我們能夠在客戶端（瀏覽器）對用戶輸入的數據先進行驗證，這樣會減少針對服務器請求的頻率，從而緩解Web服務器訪問的壓力。ASP.MVC 2.0及其之前的版本采用ASP.NET Ajax進行客戶端驗證，在ASP.NET MVC 3.0中，jQuery驗證框架被引入是我們可以采用Unobtrusive JavaScript的方式進行客戶端驗證。[本文已經同步到《How ASP.NET MVC Works?》中]

目錄
一、Unobtrusive JavaScript
二、以內聯的方式指定驗證規則
三、單獨指定驗證規則和錯誤消息

一、Unobtrusive JavaScript

Unobtrusive JavaScript已經成為了JavaSccript編程的一個指導方針，Unobtrusive JavaScript體現了一種主流的Web設計策略，即“漸進式增強（PE，Progressive Enhancement）”。它采用分層的方式實現了Web頁面內容與功能的分離，即用于實現某種功能的JavaScript不是內嵌于用于展現內容的HTML中，而是作為獨立的層次建立在HTML之上。

我們就以驗證為例，一個Web頁面中具有一個表單，我們需要對針對表單中三個文本框（foo、bar和baz）的輸入進行驗證。假設具體的驗證操作實現在validate函數中，那么我們可以采用如下的HTML時相應的文本框在失去焦點的時候對輸入的數據實施驗證。

   1: <form action="/">

   2:     <input id="foo" type="text" onblur="validate()" />

   3:     <input id="bar" type="text" onblur="validate()" />

   4:     <input id="baz" type="text" onblur="validate()" />

   5:     ...

   6: </form>

但這不是一個好的設計，理想的方式是讓HTML只用于定義內容呈現的結構，讓CSS控制內容呈現的樣式，而所有功能的實現定義在JavaScript中，所以用于實現驗證對JavaScript的調用不應該出現在HTML中。所以按照Unobtrusive JavaScript的編程方式，我們應該將以內聯方式實現的事件注冊（onblur="validate()"）替換成如下的形式。

   1: <form action="/">

   2:   <input id="foo" type="text"/>

   3:   <input id="bar" type="text"/>

   4:   <input id="baz" type="text" />

   5: </form>

6:

   7: <script type="text/javascript">   1:  
   2:     window.onload = function () {
   3:         document.getElementById("foo").onblur = validate;
   4:         document.getElementById("bar").onblur = validate;
   5:         document.getElementById("baz").onblur = validate;
   6:     } 
</script>

Unobtrusive JavaScript是一個很寬泛的話題，在本篇中不可能展開進行系統地介紹。Unobtrusive JavaScript在jQuery的驗證中得到了很好的體現，接下來我們就簡單地介紹一下使用jQuery進行驗證的編程方式。

二、以內聯的方式指定驗證規則

jQuery的驗證實際上是對存在于表單的輸入元素進行驗證，它支持一種內聯（Inline）的編程方式是我們可以直接將驗證的規則直接編寫在被驗證輸入HTML元素的class（表示CSS類型）屬性中。考慮到有一些讀者對jQuery的驗證框架可能不太熟悉，為此我們來做一個簡單的實例驗證。

雖然演示jQuery驗證使用一個單純的HTML文件就可以了，但是在這里我們還是通過Visual Studio的ASP.NET MVC項目模板創建一個空的Web應用，這樣做有兩個目的：其一、項目在創建過程中會自動添加包含jQuery本身及其驗證插件的.js文件；其二，可以確保我們現在使用的用于驗證的.js文件和ASP.NET MVC真正使用的.js文件是一致的。我們創建如下一個默認的HomeController，在Action方法Index中將默認的View呈現出來。

   1: public class HomeController : Controller

   2: {

   3:     public ActionResult Index()

   4:     {

   5:         return View(new Contact());

   6:     }

   7: }

我們將作為呈現Web頁面的整個HTML定義在Action方法對應的View中，如下所示的代碼片斷是該View的定義。由于我們使用View來定義最終呈現的完整的HTML，所以我們將Layout設置為Null。

   1: @{

   2:     Layout = null;

   3: }

   4: <!DOCTYPE html>

   5: <html>

   6: <head>

   7: <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />

   8:     <script type="text/javascript" src="http://www.rzrgm.cn/Scripts/jquery-1.6.2.js"></script>   1:  
   2:     <script type="text/javascript" src="http://www.rzrgm.cn/Scripts/jquery.validate.js"/>
   3:     <script type="text/javascript">
   4:         $(document).ready(function () {
   5:             $("form").validate();
   6:             $("td:first-child").css("text-align", "right");
   7:         });
   8:     
</script>

   9:     <style type="text/css">

  10:         label.error{color: red;}

  11:     </style>

  12:     <title>Index</title>

  13: </head>

  14: <body>

  15:     <form action="/">

  16:     <table>

  17:         <tr>

  18:             <td>姓名：</td>

  19:             <td><input class="required"  id="name" name="name" type="text"/></td>

  20:         </tr>

  21:         <tr>

  22:             <td>出生日期：</td>

  23:             <td><input class="required date" id="birhthDate" name="birhthDate" type="text"/></td>

  24:         </tr>

  25:         <tr>

  26:             <td>Blog地址：</td>

  27:             <td><input class="required url" id="blogAddress" name="blogAddress" type="text"/></td>

  28:         </tr>

  29:         <tr>

  30:             <td>Email地址：</td>

  31:             <td><input class="required email" id="emailAddress" name="emailAddress" type="text"/></td>

  32:         </tr>

  33:         <tr>

  34:             <td colspan="2"><input type="submit" value="保存" /></td>

  35:         </tr>

  36:     </table>

  37:     </form>

  38: </body>

  39: </html>

除了通過CSS文件應用和手工定義樣式（label.error{color: red;}）之外，我們需要將兩個必要的.js文件包含進行，一個是jQuery的核心文件jquery-1.6.2.js，另一個是實現驗證的jquery.validate.js。整個HTML文件的主體部分是一個表單，我們可以通過其中的文本框輸入一些個人信息（姓名、出生日期、Blog地址和Email地址），最后點擊“保存”按鈕對輸入數據進行提交。

對于這四個文本框對應的<input>元素來說，其class屬性在這里被用于進行驗證規則的定義。其中required表示對應的數據是必須的，而date、url和email則對輸入數據的格式進行驗證以確保是一個合法的日期、URL和Email地址。而真正對輸入實施驗證體現在如下一段JavaScript調用中，在這里我們僅僅是調用<form>元素的validate方法而已。

   1: <script type="text/javascript">   1:  
   2:     $(document).ready(function () {
   3:         $("form").validate();
   4:     });
</script>

現在運行我們的程序，一個用于提交個人信息的頁面會被呈現出來。當我們輸入不合法的數據時相應的錯誤消息顯示在被驗證元素的右側，具體的效果如下圖所示。

三、單獨指定驗證規則和錯誤消息

驗證規則其實可以不用以內聯的方式定義在被驗證HTML元素中，可以直接定義在用于實施驗證的validate方法中。該方法不僅僅可以指定表單被驗證的輸入元素對應的驗證規則，還可以指定驗證消息，以及其他驗證行為。現在我們將上面演示實例中的View的HTML進行相應的修改，將包含在表單中的四個文本框通過class屬性設置的驗證規則移除。然后再調用表單validate方法實施驗證的時候按照如下的方式手工地為被驗證輸入元素指定相應的驗證規則和錯誤消息，驗證規則和錯誤消息與驗證元素之間是通過name屬性（不是id屬性）進行關聯的。

   1: <script type="text/javascript">   1:  
   2:     $(document).ready(function () {
   3:         $("form").validate({
   4:             rules   :{
   5:                 name        :{required: true},
   6:                 birhthDate  :{required: true, date: true},
   7:                 blogAddress :{url: true},
   8:                 emailAddress:{required: true, email: true}
   9:             },
  10:  
  11:             messages: {
  12:                 name        :{ required: "請輸入姓名" },
  13:                 birhthDate  :{required: "請輸入出生日期", date: "請輸入一個合法的日期"},
  14:                 blogAddress :{ url: "請輸入一個合法的URL" },
  15:                 emailAddress:{required: "請輸入Email地址", email: "請輸入一個合法的Email地址"}
  16:             }           
  17:         });
  18:     });
</script>

再次運行我們的程序，我們定制的錯誤消息就會按照如圖6-9所示的效果呈現出來。（S612）

ASP.NET MVC的客戶端驗證：jQuery的驗證
 ASP.NET MVC的客戶端驗證：jQuery驗證在Model驗證中的實現
 ASP.NET MVC的客戶端驗證：自定義驗證

posted @ 2012-06-17 10:28 Artech 閱讀(20504) 評論(16) 收藏舉報

刷新頁面返回頂部

ASP.NET MVC的客戶端驗證：jQuery的驗證

一、Unobtrusive JavaScript

二、以內聯的方式指定驗證規則

三、單獨指定驗證規則和錯誤消息

公告