MVC學習系列——Model驗證擴展

     MVC中,實現了前端後端的驗證。html

前端驗證。步驟: 前端

web.config這兩個得開啓:jquery

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

JS設置web

第一步:引入頁面js後端

@Scripts.Render("~/bundles/jqueryval")

第二步:BundleConfig類,得有服務器

1  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
2                         "~/Scripts/jquery.validate*"));

也就是這三個js
mvc

前端驗證,在MVC中的實現:ide

在Model上面加一些特性,都在System.ComponentModel.DataAnnotations中,好比Required  range等。ui

MVC中的HtmlHelp會分析這些特性,加載一下data-XX.spa

好比:

1   [Required]
2   public string Gender { get; set; }
1  @Html.EditorFor(x => x.Gender)

生成的html

1 <input class="text-box single-line" data-val="true" data-val-required="Gender 字段是必需的。" id="Gender" name="Gender" type="text" value="">

而後根據相關JS自動實現前端驗證。

服務器端驗證:

 在mvc中的實現:在Model上面加一些特性,都在System.ComponentModel.DataAnnotations中,好比Required  range等。

 1  [HttpPost]
 2         public ActionResult CreateStudent(StudentViewModel model)
 3         {
 4 
 5             ModelState.AddModelError("A", "AAAAA");
 6             ModelState.AddModelError("B", "BBBBB");
 7             ModelState.AddModelError("C", "CCCCC");
 8             ModelState.AddModelError("D", "DDDDD");
 9 
10             return View();
11         }

在ModelBinder過程當中,開啓了服務器端的驗證。同時把驗證不經過信息以鍵值對的方式,傳值給ModelState中

錯誤信息的呈現: 

 @Html.ValidationSummary(false)

是否隱藏錯誤信息:false即不隱藏錯誤信息,true即隱藏錯誤信息

1 @Html.ValidationMessageFor(x => x.Name)
2 @Html.ValidationMessage("Name")

第一個是lamda表達式,第二個是通常形式,做用是同樣的。

都是呈現對應錯誤的(根據key,呈現對應的value)

 

 

自定義ValidationAttribut(僅針對服務器端的驗證) 

1:針對一個屬性 

新建類MyValidationAttribute,繼承ValidationAttribute

 1  public class MyValidationAttribute : ValidationAttribute
 2     {
 3         public MyValidationAttribute()
 4         {
 5             ErrorMessage = "The Name Must be Zhangsan";
 6         }
 7         public override bool IsValid(object value)
 8         {
 9             if (value==null)
10             {
11                 return false;
12             }
13             string result = value.ToString();
14             //判斷是否有值
15             if (string.IsNullOrEmpty(result))
16             {
17                 return false;
18             }
19 
20             if (result=="Zhangsan")
21             {
22                 return true;
23             }
24 
25             return false;
26         }
27     }

應用:

1 public class StudentViewModel
2     {
3         public string ID { get; set; }
4         [MyValidationAttribute]
5         public string Name { get; set; }
6         [Required]
7         public string Gender { get; set; }
8     }

View:

 1 <div>
 2     @using (Html.BeginForm())
 3     {
 4         @Html.ValidationSummary(false)
 5         <fieldset>
 6             <legend>UserInfo</legend>
 7             <div class="editor-label">
 8                 @Html.LabelFor(x => x.Name)
 9             </div>
10             <div class="editor-field">
11                 @Html.EditorFor(x => x.Name)
12                 @Html.ValidationMessageFor(x => x.Name)
13                 @Html.ValidationMessage("Name")
14             </div>
15 
16             <div class="editor-label">
17                 @Html.LabelFor(x => x.Gender)
18             </div>
19             <div class="editor-field">
20                 @Html.EditorFor(x => x.Gender)
21                 @Html.ValidationMessageFor(x => x.Gender)
22             </div>
23         </fieldset>
24         <input type="submit" value="提交" />
25     }
26 </div>

效果:

2:複雜的業務邏輯

類StudentViewModel繼承接口 IValidatableObject

 public class StudentViewModel: IValidatableObject
    {
        public string ID { get; set; }
        [MyValidationAttribute]
        public string Name { get; set; }
        [Required]
        public string Gender { get; set; }

        public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
        {
            if (!string.IsNullOrEmpty(Name))
            {
                if (Name=="Zhangsan" && Gender=="Nan")
                {
                    yield return new ValidationResult("Zhangsan and Gender is Nan,Which is wrong!");
                }
            }
        }
    }

效果圖:

源碼:  http://pan.baidu.com/s/1pKDMgDd

相關文章
相關標籤/搜索