• https://17bang.ren/Article/Edit/546
  

unobtrusive

观察由ASP.NET TagHelper / HtmlHelper生成的表单元素：

<input type="text" data-val="true" data-val-required="* 必须填写" id="Register_UserName" name="Register.UserName" value=""> 

以及他们相应的错误消息元素：

<span class="field-validation-valid" data-valmsg-for="Register.UserName" data-valmsg-replace="true"></span>

为什么会有这些以 data-val 开头的属性呢？

实现机制

为了集成服务器/客户端验证，微软基于validate开发出jquery.validate.unobtrusive.js插件（以下简称unobtrusive）。

生成的form表单元素中data-开头的属性，都是为unobtrusive准备的。unobtrusive利用：

• data-val="true" ：知道要对该元素进行验证（val是validate的简写）
  
• data-val-required="* 必须填写"：
  
  • required：对应validate中的method name
  • "* 必须填写"：对应validate中的message

还可以有验证参数，比如使用[MinLength(4)]之后，会有属性：

• data-val-minlength-min="4"，minlength对应method name，min="4"对应参数名（min）和值（4）
  

data-valmsg-for="inputname"等也是类似的作用。

然后，unobtrusive根据以上属性自动设定rule并进行验证，于是开发人员就不用再：

    $("form").validate();

演示：在HTML页面再引入unobtrusive（一样要注意引入顺序，必须在validate之后），不需要任何额外的代码，就能实现验证效果。

而且，因为unobtrusive实际上应用了validate，所以validate中存在的方法，unobtrusive页面一样可以使用，比如：

$('form').valid()    //再验证form表单一次

自定义实现

一些特殊的情况下，我们可能还要利用unobtrusive实现自定义的验证。尤其是验证需要不止一个元素的时候，比如：

• 一个元素中的值不能大于/小于另一个元素（中的值）
  
• 一组元素至少选中其中一个
• ……

利用参数

            $.validator.addMethod("creditEnough", function (value, element, param) {
                return this.optional(element) ||  //element的值不为空时才触发验证 parseInt(value) <= parseInt($(param).text());
            }, "* 出售的帮帮币大于可出售帮帮币");

添加adapter

$.validator.unobtrusive.adapters.add("enough", ["id"], function (options) {
    //options.rules["enough"] = options.params.id;
    options.rules.enough = options.params.id;
    //options.messages["enough"] = options.message;
    options.messages.enough = options.message;
})

因为缺乏对unobtrusive的全面认识，从逻辑上看有些难以理解，

• adapter：适配器，将unobtrusive和validate“适配”起来，或者讲unobtrusive转化成validate
  
• creditEnough：method name，该rule使用哪一个method（adapter还可以理解成：设立一个规则）
  
• ["id"]：必须是一个数组，可选，指定哪些参数被采用
• 其中，options的
  左边的rules和messages是要建立的rule和message，一开始是空的。是所有的参数值
  右边的params和message是从HTML标签中取出来的，

要生成一个rule：credit=""

options.rules 的效果

其他

禁用某项比如：据实结算即不需要填写帮帮币了

$(form).removeData("validator")

$.validator.unobtrusive.parse();

代码触发验证

$form.valid()
$.validator.unobtrusive.parse('#yourFormSelector');

作业

参考“一起帮”，给之前的Form表单，添加验证

在当前系列 垃圾桶 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：

QQ群：273534701

答疑解惑，远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧