MVC 數據驗證

MVC 數據驗證

  MVC數據驗證各種各樣的驗證註解。System.ComponentModel.DataAnnotations

一、基礎特性

  一、Required

    必填選項,當提交的表單缺少該值就引發驗證錯誤。

  二、StringLength

    指定允許的長度

    指定最大長度:

  [StringLength(20)]  //最大長度不超過20個字符

    指定最短於最長限制:

  [StringLength(20,MinimumLength=3)]  //最大長度不超過20個字符,最短不能低於3個字符

  三、RegularExpression

    正則表達式能夠匹配的字符串,如果不能匹配,則報一個驗證錯誤

  [RegularExpression(@"[A-Za-z0-9.%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}")]

  如郵箱格式驗證:

[RegularExpression(@"^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$", ErrorMessage = "請輸入正確的電子郵箱地址!")]

  四、Range

    Range特性用來指定數值類型值的最小值和最大值。

  [Range(35,44)]    //整型,最小35,最大44  [Range(typeof(decimal),"0.00","49.99")]    //decimal類型

  五、Remote

    允許利用服務器端的回調函數執行客戶端的驗證邏輯。說白了就是支持AJAX驗證。

    需要引用命名空間:System.Web.Mvc;

    這個寫個異步驗證用戶名是否存在的DEMO:

複製代碼

        [Required]
        [Remote("CheckUserName", "Home")]        public string UserName
        {            get;            set;
        }

複製代碼

    Controller代碼:

複製代碼

        public JsonResult CheckUserName(string UserName)
        {            bool result = true;            if (UserName == "admin")
            {
                result = false;
            }            return Json(result,JsonRequestBehavior.AllowGet);
        }

複製代碼

    顯示結果:

    

     

    留意到,是通過AJAX發送UserName的值到服務器端判斷過的。

   六、Compare

    用於確保模板對象的兩個對象擁有相同的值。

    例如,通常輸入密碼之後還要求用戶再次確認密碼,這時候就是Compare屬性發揮作用的時候了。

  [Compare("要對比的屬性名")]

    

  以上特性需要 using System.ComponentModel.DataAnnotations;

  同時需要注意Web.config裏面的這兩個選項是否設置爲了true;

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

 

 

二、自定義錯誤提示消息

   每個特性都允許傳遞一個帶有自定義錯誤提示消息的參數。

複製代碼

        [Required(ErrorMessage="用戶名必須填寫")]
        [Remote("CheckUserName", "Home",ErrorMessage="此用戶名已存在")]        public string UserName
        {            get;            set;
        }

複製代碼

  

   自定義錯誤消息,還有一個格式項,如

[Required(ErrorMessage="{0}必須填寫")]
publit string Name
{  get;  set;    
}

  則{0}在輸入的時候會被Name替換。

  如果以上的驗證方式還不夠,你還可以自定義驗證,到時候忘記了可以翻《Asp.net MVC3 高級編程》第127頁。這裏就不寫DEMO了,用到再寫。

三、顯示和編輯註解

  1、Display

  如果使用的是直接EditorForModel實現的話,Display特性可以幫助你設置友好的顯示名稱

  例如:

[Display(Name="密碼")]public string PassWord { get; set; }

  顯示結果如下:

  

   其次Display還支持顯示屬性的順序,如

[Display(Name=,order =  =,order =

  後面的順序是顯示編輯框的順序,默認是10000,按升值排序。

   2、ScaffoldColumn

  隱藏Html輔助方法(如EditorForModel,DisplayForModel)顯示一些屬性。

[ScaffoldColumn(false)]        //不顯示該屬性的編輯框public string UserName { get; set; }

  雖然ScaffoldColumn可以做到不顯示一些屬性在頁面上被編輯,但是如果提交的Form有這個屬性值,模型綁定機制依然會綁定此屬性值。要解除就要顯式的[Bind]了,這個與本篇無關。此處不提。

   3、DisplayFormat

   DisplayFormat特性可以用來處理屬性的各種格式化選項。當屬性包含空值時,可以提供可選的顯示文本,也可以爲包含標記的屬性關閉HTML編碼,還可以爲運行時指定一個應用於屬性值的格式化字符串。

  例如:

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:c}")]public decimal money { get; set; }

  這樣,當有初始值的時候,顯示的代碼將如下所示:

  

  注意是初始值,如果是直接填寫的並不會有符號。來看Controller中設置的初始值:

        public ActionResult PersonAdd()
        {
            Person_Model p = new Person_Model();
            p.money = 12.10M;            return View(p);
        }

  此顯示樣式在提交回Controller中是沒用的,因爲模型綁定器將不能解析返回的價格值。怎麼用自己斟酌,用於顯示還是OK的。

  4、ReadOnly

  如果確保默認的模型綁定器不使用請求中的新值更新屬性,可以給屬性添加ReadOnly特性:

[ReadOnly(true)]public string Name { get; set; }

  注意,此屬性仍然會顯示一個可編輯的文本框來顯示Name,但是模型綁定器不會接收其值,因此只有模型綁定器考慮ReadOnly屬性。

  5、DataType

  DataType特性可以爲運行時提供關於屬性的特定用途的信息。

  例如:

[DataType(DataType.Password)]public string PassWord { get; set; }

  顯示效果如下:

  

  該屬性可以用於指定多選按鈕,單選按鈕,密碼輸入框,等等類型的數據。

  6、UIHint

  UIHint特性給Asp.net MVC運行時提供了一個模板名字,以備調用模板輔助方法如(DisplayFor和EditorFor)渲染輸出時使用。也可以自定義自己的模板輔助方法來重寫Asp.net MVC的默認行爲。

  7、HiddenInput

  HiddentInput在名稱空間System.Web.Mvc中,它可以告知運行時渲染一個type特性值爲"hidden"的輸入元素。說白了就是<input type="hidden" value="xxx" />

四、驗證示例

  首先新建一個MVC項目。添加如下代碼,代碼非常簡單:一個Person_Model類

複製代碼

    public class Person_Model
    {
        [Required]        public int Id { get; set; }

        [Required]        public string Name { get; set; }

        [Required]        public int Age { get; set; }
    }

複製代碼

  Controller類代碼:

複製代碼

    public class HomeController : Controller
    {        public ActionResult PersonAdd()
        {            return View();
        }

        [HttpPost]        public ActionResult PersonAdd(Person_Model model)
        {
       //一行代碼判斷驗證是否通過
            if (ModelState.IsValid)
            {                return Redirect("/Home/PersonManager");
            }            return View();
        }
    }

複製代碼

  視圖代碼:

複製代碼

@model MvcApplication1.Models.Person_Model
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}<form action="/Home/PersonAdd" method="post">  Id:<input type="text" name="Id" value="" />  @Html.ValidationMessageFor(Model => Model.Id)  //之所以寫在Person_Model的驗證會顯示到前端提示,主要是這種代碼起的作用<br />  姓名:<input type="text" name="Name" value="" />  @Html.ValidationMessageFor(Model => Model.Name)<br />  年齡:<input type="text" name="Age" value="" />  @Html.ValidationMessageFor(Model => Model.Age)<input type="submit" value="確定" /></form>

複製代碼

  先看執行的效果:

  這個例子就是驗證的,注意此處沒有客戶端驗證,完全是服務器端驗證的,如果出錯,視圖會渲染再次顯示,非常好用啊,很方便啊,要在以前你要寫多少行代碼來搞定這些繁瑣無味的驗證呢?微軟太體恤程序員了,頂一個。

  在前面的例子當中,當數據發送到服務器驗證不通過之後,則所有用戶填寫的內容在重新打開的頁面後都清空了, 如果想不清空,即用戶第一次填的內容還存在的話,可以return View(接受到的對象);

五、啓用客戶端驗證

  另外。貌似前端不執行驗證有點浪費服務器資源,如果我們要前端先驗證一次通過後再提交,這樣能夠減少服務器端驗證的次數,不能每次有一些小問題都要服務器端驗證後再返回吧!那麼如何啓用客戶端驗證呢?強大的微軟,再次膜拜中,要啓用前端驗證。你只需要兩步

  第一步:引入如下4個文件。

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="http://www.cnblogs.com/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

  第二步:在表單頭部添加:

@{
    Html.EnableClientValidation();
}

  OK,這下就非常好了,不會因爲一些雞毛蒜皮都提交表單到服務器了。只有當客戶端驗證通過了,才提交表單到服務器,當然當有表單提交過來,服務器端還是會驗證。

六、更改錯誤提示樣式

   關於錯誤的提示樣式,在/Content/Site.css裏面,你可以找到要用的樣式,更改了就可以了,在驗證錯誤的時候視圖是會帶一個行內樣式的,包括被驗證的Html控件和錯誤提示。

  特別提示:如果要前端顯示生效,即不發送數據到服務器,前端就進行驗證並顯示錯誤提示消息,那麼Form的引入一定要用MVC的,如:

  @using (Html.BeginForm())
  {
    
  }


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章