ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建

在上一篇"ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后"中，了解了jQuery如何验证，如何显示错误信息，本篇要体验ASP.NET MVC异步验证表单元素的创建，以及如何才能实现ASP.NET MVC异步验证。

 

有这样的一个模型：

    public class Student
    {
        public int Id { get; set; }
        [Required]
        public string FirstName { get; set; }
        [Required, StringLength(60)]
        public string LastName { get; set; }
        [Range(5, 50)]
        public int Age { get; set; }
    }

 

通过HomeController加载一个强类型视图。

        public ActionResult Index()
        {
            return View(new Student());
        }
        [HttpPost]
        public ActionResult Index(Student student)
        {
            if (ModelState.IsValid)
            {
                return View(student);
            }
            else
            {
                return Content("验证不通过");
            }
        }
    }   

 

Home/Index.cshtml是一个Student的强类型是视图。

@model MvcApplication2.Models.Student
@{
    ViewBag.Title = "Index";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "fm" }))
{
    <li>
        @Html.LabelFor(m => m.FirstName)
        @Html.TextBoxFor(m => m.FirstName)
        @Html.ValidationMessageFor(m => m.FirstName)
    </li>
    <li>
        @Html.LabelFor(m => m.LastName)
        @Html.TextBoxFor(m => m.LastName)
        @Html.ValidationMessageFor(m => m.LastName)
    </li>
    <li>
        @Html.LabelFor(m => m.Age)
        @Html.TextBoxFor(m => m.Age)
        @Html.ValidationMessageFor(m => m.Age)
    </li>
    <li>
        <input type="submit" value="提交" />
    </li>
}
@section scripts
{
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        
    </script>
}

浏览http://localhost:4873/，Home/Index.cshtml对应的界面：

 

点击"提交"按钮，并没有实现在客户端界面的验证，直接显示控制器返回的错误信息。

 

但，与Home/Index.cshtml对应html元素中已经存在了与异步验证相关的、以data-*开头的属性：

<form action="/" id="fm" method="post">    
   <li>
        <label for="FirstName">FirstName</label>
        <input data-val="true" data-val-required="FirstName 字段是必需的。" id="FirstName" name="FirstName" type="text" value="">
        <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
    </li>
    <li>
        <label for="LastName">LastName</label>
        <input data-val="true" data-val-length="字段 LastName 必须是最大长度为 60 的字符串。" data-val-length-max="60" data-val-required="LastName 字段是必需的。" id="LastName" name="LastName" type="text" value="">
        <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
    </li>
    <li>
        <label for="Age">Age</label>
        <input data-val="true" data-val-number="字段 Age 必须是一个数字。" data-val-range="字段 Age 必须在 5 和 50 之间。" data-val-range-max="50" data-val-range-min="5" data-val-required="Age 字段是必需的。" id="Age" name="Age" type="text" value="0">
        <span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span>
    </li>
    <li>
        <input type="submit" value="提交">
    </li>
</form>

可见，
○ 以data-*开头的属性是基于Model的验证特性产生的
○ jquery.validate.unobtrusive.js能读出这些以data-*开头的属性
○ 当jquery.validate.unobtrusive.js理解验证规则后，再调用jquery.validate.js的validate方法进行验证
○ data-val="true"表示可以对其进行异步验证
○ data-val-required="FirstName 字段是必需的。"表示验证规则是required，属性值表示错误提示信息
○ data-valmsg-for="LastName"表示是有关LastName这个字段的错误信息
○ data-valmsg-replace="true"表示错误信息会根据错误类型动态变化
○ class="field-validation-valid"，当没有错误信息的时候显示这个，当有错误信息的时候显示class="field-validation-error"

 

显而易见，ASP.NET MVC实现客户端验证的"三剑客"为：

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

 

再次运行http://localhost:4873/，就有了客户端异步验证及其错误提示：  

 

下一篇将尝试了解jquery.validate.unobtrusive.js在ASP.NET MVC中是如何工作的。