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中是如何工作的。