MVC學習筆記之：ASP.NET MVC的客戶端驗證-jQuery.validate驗證結合Model驗證中的實現

關於JQuery.validate客戶端驗證，可以在網上找找資料，Jquery Validate客戶端驗證

jQuery驗證控制元件jquery.validate.js使用說明+中文API

結合ASP.NET MVC中的運用，可以看蔣金楠大牛的部落格，寫的很系統，ASP.NET MVC的客戶端驗證：jQuery的驗證.以及他相關的部落格，寫的非常好。

下面是我個人結合自己專案中的筆記：

Model的定義：

 
public class UserInfo
{
        [Required]
        [StringLength(20, ErrorMessage = "UserName can not more than 20 chars")]
        public string UserName { get; set; }
        [Required]
        [StringLength(200)]
        public string Password { get; set; }
}

View中的程式碼：

@model XXX.Model.User.UserInfo

<li>
                            <p>
                                Username
                            </p>
                            @Html.TextBoxFor(m => m.UserName)
                            <br />
                            @Html.ValidationMessageFor(m => m.UserName)

                        </li>
                        <li>
                            <p>
                                Password
                            </p>
                            @Html.PasswordFor(m => m.Password)
                            <br />
                            @Html.ValidationMessageFor(m => m.Password)
                        </li>

生成的Html程式碼：

 <li>
                            <p>
                                Username
                            </p>
                            <input data-val="true" data-val-length="UserName can not more than 20 chars" data-val-length-max="20" data-val-required="UserName 欄位是必需的。" id="UserName" name="UserName" type="text" value="" />
                            <br />
                            <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>

                        </li>
                        <li>
                            <p>
                                Password
                            </p>
                            <input data-val="true" data-val-length="欄位 Password 必須是最大長度為 200 的字串。" data-val-length-max="200" data-val-required="Password 欄位是必需的。" id="Password" name="Password" type="password" />
                            <br />
                            <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
                        </li>

如果看過jquery.validate相關的文件，你可能會疑惑，jquery.validate一般都是把驗證規則定義在css樣式中，更規範的寫法，獨立寫js，和html脫離開來。

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

or

 <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>

我們發現，在Model中設定了[Required]等特性，在前臺不寫一行js驗證的程式碼，客戶端已經實現了驗證；後臺只要呼叫一行程式碼ModelState.IsValid，就實現了伺服器端的驗證，是不是有web form中Page.IsValid的感覺，不用寫驗證的程式碼，是不是很爽？

if (ModelState.IsValid)
                {
                    LoginResponse response = eServiceProxy.serviceProxy.Login(request);
                    if (response != null && response.IsAuthenticated)
                    {
                        FormsAuthentication.SetAuthCookie(request.Username, true);
                        return RedirectToAction("Index", "Home");
                    }
                    else
                    {
                        ViewData["errorMsg"] = "Login Fail";
                    }
                }

可是，有沒有很好奇，MVC生成的html中，沒有定義規則的class,也沒有生成相關的js來定義rules.甚至連呼叫驗證的validate()方法都沒有，它是如何觸發驗證的呢？