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对应的界面:

1

 

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

2

 

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

3

 

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

转载于:https://www.cnblogs.com/darrenji/p/4105757.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值