ASP.NET MVC 表單驗證方式總結__.net

一、綁定參數的表單驗證：（通過ValidationAttribute特性綁定到Model來驗證）

1.引入js檔案：
jquery的某個版本

jquery.validate.js

jquery.validate.unobtrusive.js

2.在網站Web.config中，相關的屬性必須設定為true：

  <appSettings>      ...    <add key="ClientValidationEnabled" value="true" />    <add key="UnobtrusiveJavaScriptEnabled" value="true" />  </appSettings>

3.在用到的View Model上添加驗證特性或自訂特性：

    public class Customer    {        [Required]        [ValidUserNameAttribue(ErrorMessage = "使用者名稱只能為darren")]        [Display(Name = "使用者名稱")]        public string UserName { get; set; }    }

   自訂驗證特性ValidUserNameAttribue （繼承屬性類別ValidationAttribute，重寫IsValid方法）   using System.ComponentModel.DataAnnotations;    namespace jan.Extension   {       public class ValidUserNameAttribue : ValidationAttribute       {           public override bool IsValid(object value)           {               //只有同時滿足2個條件就讓通過，否則驗證失敗               return (value != null && value.ToString() == "darren");           }       }   }

4.在View中加入驗證

@using (Html.BeginForm()) {    @Html.ValidationSummary(true)    <fieldset>        <legend>Album</legend>        <div class="editor-label">            @Html.LabelFor(model => model.GenreId, "Genre")        </div>        <div class="editor-field">            @Html.DropDownList("GenreId", String.Empty)            @Html.ValidationMessageFor(model => model.GenreId)        </div>        <div class="editor-label">            @Html.LabelFor(model => model.ArtistId, "Artist")        </div>        <div class="editor-field">            @Html.DropDownList("ArtistId", String.Empty)            @Html.ValidationMessageFor(model => model.ArtistId)        </div>        <div class="editor-label">            @Html.LabelFor(model => model.UserName )        </div>        <div class="editor-field">            @Html.EditorFor(model => model.UserName )            @Html.ValidationMessageFor(model => model.UserName)        </div>        <div class="editor-label">            @Html.LabelFor(model => model.Price)        </div>        <div class="editor-field">            @Html.EditorFor(model => model.Price)            @Html.ValidationMessageFor(model => model.Price)        </div>        <div class="editor-label">            @Html.LabelFor(model => model.AlbumArtUrl)        </div>        <div class="editor-field">            @Html.EditorFor(model => model.AlbumArtUrl)            @Html.ValidationMessageFor(model => model.AlbumArtUrl)        </div>        <p>            <input type="submit" value="Create" />        </p>    </fieldset>}

5.在伺服器端：

 if (ModelState.IsValid)  {   db.Albums.Add(album);   db.SaveChanges();   return RedirectToAction("Index");  }

二、綁定參數的表單驗證（通過實現IValidatableObject介面來實現Model自我驗證）

步驟1、2、4、5同上，

步驟3.在ViewModel中：實現IValidatableObject介面，實現其Validate方法：

    在實現的Validate方法中，我們從驗證上下文中擷取被驗證的Person對象，並對其屬性成員進行逐個驗證。如果資料成員沒有通過驗證，我們通過一個ValidationResult對象封裝錯誤訊息和資料成員名稱（屬性名稱），該方法最終返回的是一個元素類型為ValidationResult的集合。ASP.NET MVC 會自動調用該方法對繫結資料對象實施驗證。

public class Person: IValidatableObject{    [DisplayName("姓名")]    public string Name { get; set; }    [DisplayName("性別")]    public string Gender { get; set; }    [DisplayName("年齡")]    public int? Age { get; set; }    public IEnumerable<ValidationResult> Validate( ValidationContext validationContext)    {        Person person = validationContext.ObjectInstance as Person;        if (null == person)        {            yield break;        }        if(string.IsNullOrEmpty(person.Name))        {            yield return new ValidationResult("'Name'是必需欄位", new string[]{"Name"});        }        if (string.IsNullOrEmpty(person.Gender))        {            yield return new ValidationResult("'Gender'是必需欄位", new string[] { "Gender" });        }        else if (!new string[]{"M","F"}.Any( g=>string.Compare(person.Gender,g, true) == 0))        {            yield return new ValidationResult("有效'Gender'必須是'M','F'之一",   new string[] { "Gender" });        }        if (null == person.Age)        {            yield return new ValidationResult("'Age'是必需欄位",    new string[] { "Age" });        }        else if (person.Age > 25 || person.Age < 18)        {            yield return new ValidationResult("'Age'必須在18到25周歲之間",    new string[] { "Age" });        }                }}

三.綁定參數的表單驗證（ 通過實現IDataErrorInfo介面）

步驟1、2、4、5同上，

步驟3.在ViewModel中實現IDataErrorInfo介面，將其索引參數作為屬性：

   IDataErrorInfo介面定義在“System.ComponentModel”命名空間下，它提供了一種標準的錯誤資訊定製方式。如下面的程式碼片段所示，IDataErrorInfo具有兩個成員，唯讀屬性Error用於擷取基於自身的錯誤訊息，而唯讀索引用於返回指定資料成員的錯誤訊息。

public class Person : IDataErrorInfo{    [DisplayName("姓名")]    public string Name { get; set; }    [DisplayName("性別")]    public string Gender { get; set; }    [DisplayName("年齡")]    public int? Age { get; set; }    [ScaffoldColumn(false)]    public string Error { get; private set; }    public string this[string columnName]    {        get         {            switch (columnName)            {                case "Name":                    {                         if(string.IsNullOrEmpty(this.Name))                        {                            return "'姓名'是必需欄位";                        }                        return null;                    }                case "Gender":                    {                        if (string.IsNullOrEmpty(this.Gender))                        {                            return "'性別'是必需欄位";                        }                        else if (!new string[] { "M", "F" }.Any(                            g => string.Compare(this.Gender, g, true) == 0))                        {                            return "'性別'必須是'M','F'之一";                        }                        return null;                    }                case "Age":                    {                        if (null == this.Age)                        {                            return "'年齡'是必需欄位";                        }                        else if (this.Age > 25 || this.Age < 18)                        {                            return "'年齡'必須在18到25周歲之間";                        }                        return null;                    }                default: return null;                }        }    }}

四.綁定參數的表單驗證（ 直接在Action中手工驗證綁定的參數）（很少用）

1.ViewModel：

public class Person{    [DisplayName("姓名")]    public string Name { get; set; }    [DisplayName("性別")]    public string Gender { get; set; }    [DisplayName("年齡")]    public int? Age { get; set; }}

2.Action中：

   我們在Validate該方法中我們對作為參數的Person對象的3個屬性進行逐條驗證，如果提供的資料沒有通過驗證，我們會調用當前ModelState的AddModelError方法將指定的驗證錯誤訊息轉換為ModelError儲存起來。

 [HttpPost]    public ActionResult Index(Person person)    {        Validate(person);        if (!ModelState.IsValid)        {            return View(person);        }        else        {            return Content("輸入資料通過驗證");        }    }

 private void Validate(Person person)    {        if (string.IsNullOrEmpty(person.Name))        {            ModelState.AddModelError("Name", "'Name'是必需欄位");        }        if (string.IsNullOrEmpty(person.Gender))        {            ModelState.AddModelError("Gender", "'Gender'是必需欄位");        }        else if (!new string[] { "M", "F" }.Any(            g => string.Compare(person.Gender, g, true) == 0))        {            ModelState.AddModelError("Gender",             "有效'Gender'必須是'M','F'之一");        }        if (null == person.Age)        {            ModelState.AddModelError("Age", "'Age'是必需欄位");        }        else if (person.Age > 25 || person.Age < 18)        {            ModelState.AddModelError("Age", "有效'Age'必須在18到25周歲之間");        }    }}

3.View中：

   直接調用HtmlHelper<TModel> 的擴充方法EditorForModel將作為Model的Person對象以編輯模式呈現在表單之中

@using (Html.BeginForm())    {         @Html.EditorForModel()        <input type="submit" value="儲存"/>    }

五. Jquery Validate外掛程式表單驗證（通過使用jaquery validate外掛程式來進行表單驗證）（適用於ASP.NET WebForm 和ASP.NET MVC兩種開發方式）

法一：普通表單提交+Jquery Validate驗證方式：

1.Html：

<form id="addForm" method="post" action="/JQValidate/AddForm">         <div>             姓名：             <input type="text" name="txtName" id="txtName" />             <span class="errorMsg">錯誤資訊放置的位置</span>             <br />             年齡：             <input type="text" name="txtAge" />             <span class="errorMsg"></span>             <br />             郵遞區號：             <input type="text" name="txtZipCode" />             <span class="errorMsg"></span>         </div>         <div>             <input type="submit" value="提交" />         </div>     </form>

2.JS 驗證：

<script src="~/Scripts/jquery-1.7.1.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script type="text/javascript">     $(function () {         // 表單驗證         formValidate();     });      var formValidate = function () {         // 添加自訂校正（郵遞區號驗證）         jQuery.validator.addMethod("isZipCode", function (value, element) {             var zipCode = /^[0-9]{6}$/;             return this.optional(element) || (zipCode.test(value));        }, "請正確填寫您的郵遞區號");          $("#addForm").validate({  // #JQForm是form表單的ID            rules: {                 txtName: {  // 要驗證的表單的id                   required: true, // 是否是必填項                   minlength: 2,  // 最小長度                   remote: "/JQValidate/ValidateName"// 返回 true 就會出現錯誤資訊                 },                 txtAge: {                     required: true,                     range: [18, 30]                 },                 txtZipCode: {                     required: true,                     isZipCode: true,                 },             },             messages: {// 如果沒有給屬性錯誤提示，就會用預設提示                 txtName: {                     required: "請輸入會員名稱",  // 如果提交的時候沒有填寫提示的文字                     minlength: "會員名稱的長度不能小於2位", // 如果輸入的長度小於2提示的文字                     remote: "使用者名稱重複"                 },                 txtAge: {                     required: "年齡不可為空",                     range: "年齡範圍是18~30"                 },                 txtZipCode: {                     required: "郵遞區號不可為空",                 },             },             errorPlacement: function (error, element) { // 自訂錯誤資訊放置的位置                 error.appendTo(element.next("span"));             },         })     }; </script>

3.添加自訂校正：

http://huqiji.iteye.com/blog/2166986

// 添加自訂校正（郵遞區號驗證）jQuery.validator.addMethod("isZipCode", function (value, element) { var zipCode= /^[0-9]{6}$/; return this.optional(element) || (zipCode.test(value)); }, "請正確填寫您的郵遞區號");

4.遠程驗證：

   傳回值為true 就提示錯誤資訊，否則不提示，

 remote: "/JQValidate/ValidateName",// 返回 true 就會出現錯誤資訊

  注意如果不傳參數，預設是把當前校正的值傳到後台校正，如果還要傳入其他參數通過這種形式（dataType必須是json類型）

 remote: { // 預設會把當前驗證的值傳到後台驗證，如果還需要傳輸其他的參數在data中添加   url: "/JQValidate/ValidateName",   type: "post",   data: { "testData": "testName" },   dataType: "json", // 此處傳回型別必須是JSON  }

法二、Ajax表單Ajax.BeginForm提交+Jquery Validate驗證方式（ 實現驗證成功後的非同步提交表單）

1.引入js:

<script src="~/Scripts/jquery-1.7.1.js"></script>@*Ajax.BeginForm 需要的js 檔案*@<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script><script src="~/Scripts/jquery.validate.js"></script>

2.建立表單：

@using (Ajax.BeginForm("AddForm", "JQValidate", new { }, new AjaxOptions() { HttpMethod = "post", OnBegin = "ajaxFormOnBegin", OnSuccess = "afterOnSuccess", OnFailure = "afterOnFailure", UpdateTargetId = "UpdateTargetHiddenID" }, new { @id = "AddForm" }))     {         <div>             姓名：             <input type="text" name="txtName" id="txtName" />             <span class="errorMsg">錯誤資訊放置的位置</span>             <br />             年齡：             <input type="text" name="txtAge" />             <span class="errorMsg"></span>             <br />             郵遞區號：             <input type="text" name="txtZipCode" />             <span class="errorMsg"></span>         </div>         <div>             <input type="submit" value="提交" />         </div>     }

3.js驗證：同法一 步驟2.3.4

法三、非Form表單提交+Jaquery Validate方式

   有時候頁面上不僅是表單資料，也有表格等其他資料，而不想通過form表單都提交到後台，但是又想通過Jquery.Validate方式驗證。那麼我們可以這樣做。

1.html：

<form>         <div>             姓名：             <input type="text" name="txtName" id="txtName" />             <span class="errorMsg">錯誤資訊放置的位置</span>             <br />             年齡：             <input type="text" name="txtAge" />             <span class="errorMsg"></span>             <br />             郵遞區號：             <input type="text" name="txtZipCode" />             <span class="errorMsg"></span>         </div>         <div>             <input type="button" value="提交" onclick="javascript: btnSubmit();" />         </div>     </form>

2.js 驗證：

   Jquery.Validate 中有一個方法是valid()，是用來判斷表單是否驗證通過的，同時會進行校正是否合法。

<script type="text/javascript">     $(function () {         // 表單驗證         formValidate();     });      var formValidate = function () {         // 添加自訂校正（郵遞區號驗證）         jQuery.validator.addMethod("isZipCode", function (value, element) {             var zipCode = /^[0-9]{6}$/;             return this.optional(element) || (zipCode.test(value));         }, "請正確填寫您的郵遞區號");          $("#addForm").validate({  // #JQForm是form表單的ID             rules: {                 txtName: {  // 要驗證的表單的id                     required: true, // 是否是必填項                     minlength: 2,  // 最小長度                     remote: "/JQValidate/ValidateName",// 返回 true 就會出現錯誤資訊                  },                 txtAge: {                     range: [18, 30]                 },                 txtZipCode: {                     required: true,                     isZipCode: true,                 },             },             messages: {// 如果沒有給屬性錯誤提示，就會用預設提示                 txtName: {                     required: "請輸入會員名稱",  // 如果提交的時候沒有填寫提示的文字                     minlength: "會員名稱的長度不能小於2位", // 如果輸入的長度小於2提示的文字                     remote: "使用者名稱重複"                 },                 txtAge: {                     required: "年齡不可為空",                     range: "年齡範圍是18~30"                 },                 txtZipCode: {                     required: "郵遞區號不可為空",                 },             },             errorPlacement: function (error, element) { // 自訂錯誤資訊放置的位置                 error.appendTo(element.next("span"));             },         })     }; </script>

3.點擊按鈕判斷Jaquery Validate驗證是否通過，通過就往後台提交資料，沒有通過會出現錯誤提示.

     // 非submit按鈕提交方式     var btnSubmit = function () {         // 檢測表單是否驗證通過 並進行表單驗證         var validateState = $("#addForm").valid();         if (!validateState) {             return false;         }           // 往後台提交資料，當然還可以傳入其他你想提交的資料         $.ajax({             url: "/JQValidate/AddForm",             type: "post",             dataType: "text",             data:{txtName:$("#txtName").val()},             success: function (data) {                 alert(data);             }         });              };

六.ASP.NET MVC非同步表單驗證和非同步非表單驗證：三種方法 http://www.csharpwin.com/dotnetspace/13578r5351.shtml

1、通過Ajax.BeginForm()方式，返回部分視圖顯示驗證資訊。
2、通過jQuery+Html.BeginForm()方式，返回部分視圖顯示驗證資訊。
3、通過jquery，返回json字串，json字串中包含部分視圖及驗證資訊。