在上一篇"ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后"中,了解了jQuery如何验证,如何显示错误信息,本篇要体验ASP.NET MVC异步验证表单元素的创建,以及如何才能实现ASP.NET MVC异步验证。
有这样的一个模型:
monospace; width: 100%; margin: 0em; background-color: #f0f0f0"> 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中是如何工作的。