在上一篇"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.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/,就有了客户端异步验证及其错误提示:

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

ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建的更多相关文章

  1. MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱

    网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...

  2. ASP.NET MVC 中将数据从View传递到控制器中的表单提交法

    本方法以搜索功能为例,在view中输入要搜索的关键字,提交到相应controller中进行处理. view中代码: <div class="searchBox"> @u ...

  3. ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素

    阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Bootstrap 验证样式 ASP.NET MVC创建包含Bootstrap样式编辑模板 小结 Bootstra ...

  4. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  5. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  6. Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  7. PHP / JavaScript / jQuery 表单验证与处理总结: 第①部分 PHP 表单验证与处理

    PHP VERSION = 5.3.10 一.关于 $_REQUEST PHP 文档关于 $_REQUEST 的说明: 说明 默认情况下包含了 $_GET,$_POST 和 $_COOKIE 的数组. ...

  8. v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则\表单元素,表单无法验证问题剖析 )

    fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...

  9. 【表单验证】基于jQuery的高度灵活的表单验证(无UI)

    表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体 ...

随机推荐

  1. Dhaka2011

    Dhaka2011 A - Binary Matrix 题目描述:有一个\(n \times m\)的\(01\)矩阵,这一矩阵第一行和最后一行是相邻的,第一列和最后一列是相邻的,现在每次可以交换相邻 ...

  2. Python PIL: cannot write mode RGBA as BMP(把有四位通道(RGBA)的图片换成有三位通道的(RGA))

    图片png结尾的有四个通道RGBA,把四个通道改为三个通道(RGB),如下,bg为修改后的图片 img = Image.open('pic\\find.png')bg = Image.new(&quo ...

  3. c run-time library 和 standard c++ library

    参考: c run-time libraries:  http://msdn.microsoft.com/zh-cn/library/vstudio/abx4dbyh(v=vs.100).aspx H ...

  4. phpMyAdmin setup.php脚本的任意PHP代码注入漏洞

    phpMyAdmin (/scripts/setup.php) PHP 注入代码 此漏洞代码在以下环境测试通过:      phpMyAdmin 2.11.4, 2.11.9.3, 2.11.9.4, ...

  5. Angular 2.0--1

    Angular 2.0 从0到1 (五) 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Ang ...

  6. 【LOJ】#2126. 「HAOI2015」数组游戏

    题解 简单分析一下就知道\(\lfloor \frac{N}{i} \rfloor\)相同的\(i\)的\(sg\)函数相同 所以我们只要算\(\sqrt{n}\)个\(sg\)函数就好 算每一个\( ...

  7. hive1.2.1安装步骤(在hadoop2.6.4集群上)

    hive1.2.1在hadoop2.6.4集群上的安装 hive只需在一个节点上安装即可,这里再hadoop1上安装 1.上传hive安装包到/usr/local/目录下 2.解压 tar -zxvf ...

  8. SSH免密登录机制

     SSH免密登录机制:(见下图) 1.A先使用ssh-keygen生成一对公钥和私钥:ssh-keygen 2.将A的公钥复制给B一份,并且将其追加到B的授权文件中:ssh-copy-id B 3.接 ...

  9. 040 DataFrame中的write与read编程

    一:SparkSQL支持的外部数据源 1.支持情况 2.External LIbraries 不是内嵌的,看起来不支持. 但是现在已经有很多开源插件,可以进行支持. 3.参考材料 · 支持的格式:ht ...

  10. 026.Zabbix简单调优

    一 调优相关对应项 Zabbix busy trapper processes, in % StartTrappers=5 Zabbix busy poller processes, in % Sta ...