ASP.NET MVC3 如何使用內建驗證功能達到前端與後端的同時驗證

Question

如题所述

Answer 1

最後更新：2011/7/6 下午 11:36:48本篇主要介紹 IClientValidatable 的使用，IClientValidatable 這個介面可以讓開發人員簡單的實現前端與後端的驗證，原生提供了 Range、 RegularExpression、Required、StringLength、Compare、Remote 這幾個實務上經常使用的驗證規則，而這次 ASP.NET MVC 3 已經改使用 jQuery.Validate 來做前端的驗證引擎，並且利用所謂的 unobtrusive 設計模式來達到整合與抽離，讓 HTML 依然漂亮，如此大的改變就能了解到 ASP.NET MVC 3 的確是彌補了上一版的不足，以下就來介紹如何使用內建的這幾項驗證規則。先建立一個 ASP.NET MVC 3 原生的樣板，執行後前往註冊會員的頁面（預設在 /Account/Register ）什麼都不填的情況直接按下「Register」有驗證耶刻意關掉瀏覽器的 Javascript 讓前端驗證失效再按「Register」
神奇了，為什麼連後端驗證也有
這樣版非常好，因為它已經自訂出一個 AccountModels 並且加上了驗證，開啟以後拉到最後方找到 RegisterModel 這個 Class public class RegisterModel { [Required] [Display(Name = "User name")] public string UserName { get; set; } [Required] [DataType(DataType.EmailAddress)] [Display(Name = "Email address")] public string Email { get; set; } [Required] [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)] [DataType(DataType.Password)] [Display(Name = "Password")] public string Password { get; set; } [DataType(DataType.Password)] [Display(Name = "Confirm password")] [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")] public string ConfirmPassword { get; set; } }有底色的就是關於驗證的 Attribute，因本篇主要是說明驗證因此與驗證無關的 Attribute 就不介紹了就是因為有這些設定，因此註冊頁面才能支援前後端的驗證。上面看到的效果就是預設的 Required 驗證規則，很簡單就是必填的限制而已，不過既然預設支援那麼多，那不如就一個一個玩玩看吧。 public class RegisterModel { [Required]//必填 [StringLength(3,MinimumLength=2)]//最多三個字、最少兩個字 [Display(Name = "User name")] public string UserName { get; set; } [Required] [DataType(DataType.EmailAddress)] [Display(Name = "Email")] [RegularExpression(@"\w+\@\w+",ErrorMessage="Email格式錯誤")] public string Email { get; set; } [Required] [StringLength(100, ErrorMessage = "{0} 欄位最少 {2} 個字，最多 {1} 個字", MinimumLength = 6)] [DataType(DataType.Password)] [Display(Name = "密碼")] public string Password { get; set; } [DataType(DataType.Password)] [Display(Name = "密碼確認")] [Compare("Password", ErrorMessage = "兩次密碼不一樣")] public string ConfirmPassword { get; set; } }將RegisterModel 改成上方的規則後記得先編譯再前往註冊頁面試試看就可以看到新的驗證規則都生效了眼尖的朋友可能會發現， demo 少介紹一個 Remote ，沒錯！因為這個 Remote 比較特別因此抽出來說明，這個 Remote 的功能是讓前端去讀取後端的資料來驗證的，比如說剛剛的註冊會員功能，如果我們期待已經註冊過的 User Name 不能再被註冊，那上述介紹的任何一個驗證規則都無法勝任，因為驗證的邏輯牽扯到了資料庫中現有的資料，這種情況的時候就是使用 Remote 的時機，它可以利用 AJAX 的方式呼叫後端程式，由後端程式完成驗證後再傳回結果至前端，以下就是實作步驟。 首先建立一個 ValidateController 並且在裡面寫上要給 Remote 呼叫的 Action public class ValidateController : Controller { public JsonResult CheckUserName(string userName) { bool isValidate = false; if (Url.IsLocalUrl(Request.Url.AbsoluteUri)) { //利用 IsLocalUrl檢查是否為網站呼叫的 //借此忽略一些不必要的流量 if (userName != "demoshop") { //因連資料庫麻煩 //所以假裝示範不可以註冊某一名字 isValidate = true; } } // Remote 驗證是使用 Get 因此要開放 return Json(isValidate, JsonRequestBehavior.AllowGet); } }再來改變一下 RegisterModel 中的 UserName [Required]//必填 [StringLength(10,MinimumLength=2)]//最多10個字、最少2個字 [Display(Name = "User name")] [Remote("CheckUserName","Validate",ErrorMessage="遠端驗證失敗")] public string UserName { get; set; }此Action 傳入的參數名稱必須要與你要驗證的屬性名稱一樣編譯過後回到註冊頁面，當我們輸入了「demoshop」時會顯示「遠端驗證失敗」的字樣開啟封包監控軟體（Firebug）查看第一次輸入「test」回傳的是「true」第二次輸入「demoshop」回傳的就是「false」了ASP.NET MVC 最令人喜歡的就是擴充性， Remote 驗證也提供了一些空間讓我們發揮，試想假設今天註冊的驗證需求改了， UserName 和 Email 都不能重複，難道我們要傻傻的寫兩次並且一直回後端問嗎？這不是一個網頁程式設計師該妥協的，所以程式又改成這樣 public JsonResult CheckUserName(string userName, string email) { bool isValidate = false; if (Url.IsLocalUrl(Request.Url.AbsoluteUri)) { if (userName != "demoshop" && email != "1234") { isValidate = true; } } return Json(isValidate, JsonRequestBehavior.AllowGet); }RegisterModel 因為操作流程所以將 Remote 驗證移至 Email 欄位上 [Required]//必填 [StringLength(10, MinimumLength = 2)]//最多10個字、最少2個字 [Display(Name = "User name")] public string UserName { get; set; } [Required] [DataType(DataType.EmailAddress)] [Display(Name = "Email")] [Remote("CheckUserName", "Validate", AdditionalFields = "UserName", ErrorMessage = "遠端驗證失敗")] public string Email { get; set; }千萬注意使用 AdditionalFields 的指定名稱大小寫一定要和欄位名稱一樣，像本範例你寫 AdditionalFields = "username" 是不會過的。編譯過後我們又回到註冊頁面可以看到增加的欄位也利用 Querystring 傳到後端去了如果要傳遞的欄位不只一個，可以利用逗點來區隔，此範例就再加上 Password [Remote("CheckUserName", "Validate", AdditionalFields = "UserName,Password",ErrorMessage = "遠端驗證失敗")]（這樣也是有想到的所以說彈性還真好...
）第一篇好像就有點長了先前研究的時間不算，光是寫這篇就已經花了我六顆番茄，所以就先介紹到這吧，再來的文章重點在擴充與修改，本系列文目前已經規劃了九篇，還請各位有空多多回來觀看。