天天看點

ASP.NET MVC的用戶端驗證:jQuery的驗證一、Unobtrusive JavaScript二、以内聯的方式指定驗證規則三、單獨指定驗證規則和錯誤消息

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

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

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

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

</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呈現出來。

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

除了通過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方法而已。

現在運作我們的程式,一個用于送出個人資訊的頁面會被呈現出來。當我們輸入不合法的資料時相應的錯誤消息顯示在被驗證元素的右側,具體的效果如下圖所示。

ASP.NET MVC的用戶端驗證:jQuery的驗證一、Unobtrusive JavaScript二、以内聯的方式指定驗證規則三、單獨指定驗證規則和錯誤消息

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

再次運作我們的程式,我們定制的錯誤消息就會按照如圖6-9所示的效果呈現出來。(S612)

ASP.NET MVC的用戶端驗證:jQuery的驗證一、Unobtrusive JavaScript二、以内聯的方式指定驗證規則三、單獨指定驗證規則和錯誤消息

<a href="http://www.cnblogs.com/artech/archive/2012/06/17/client-validation-01.html">ASP.NET MVC的用戶端驗證:jQuery的驗證</a>

<a href="http://www.cnblogs.com/artech/archive/2012/06/18/client-validation-02.html">ASP.NET MVC的用戶端驗證:jQuery驗證在Model驗證中的實作</a>

<a href="http://www.cnblogs.com/artech/archive/2012/05/15/custom-client-validation.html">ASP.NET MVC的用戶端驗證:自定義驗證</a>

繼續閱讀