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

时间:2023-12-17 17:57:50

在上一篇"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对应的界面:

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

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

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

但,与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.jsvalidate方法进行验证
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/,就有了客户端异步验证及其错误提示:

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

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