JQuery：客户端验证：validate和unobtrusive·源栈课堂·一起帮

JQuery：客户端验证：validate和unobtrusive

当前系列：垃圾桶

已合到：https://17bang.ren/Code/699

form表单中JavaScript参与最多的一个功能就像验证，比如：

某个文本框不能为空（必须填写）
填写的内容必须是email格式
甚至两个文本框中输入的内容必须相同，等等

演示：注册页面的验证

注意：前端没有安全性可言，服务器端必须再次独立验证！

@想一想@：那为什么还需要前端验证呢？

性能优化：不需要“浪费”一次向服务器端的请求
更快的响应速度：JavaScript直接在页面执行
更好的用户体验：没有页面刷新的闪烁

jquery.validate.js

jquery.validate.js（以下简称validate）是最流行的、基于jquery的客户端验证类库/插件（后文详述）。

ASP.NET项目内置，直接引入，注意顺序，validate必须啊jquery.js后面。

演示：一个最简单的验证效果

提交激活
阻止了请求提交
之后随输入自动变化

验证的实现由三个部分组成：

method：即具体的验证逻辑，validate内置了一些常用的mehtods：
message：当验证未能通过时，为用户显示的消息，validate为其methods内置了messages：
rule：将method和message作用于某个具体的element（form表单元素），有时候rule name和method name可以混用

validate提供了两种方法设定rule：

validate()方法。validate需要激活：
```
$('form').validate();
```
validate()方法还可以接受一个options参数，其中就可以设定rule：
```
$('form').validate({
    rules: {
        username: {
            required: true
        }
    }
});
```
其中，username是被验证element的name，required是validate内置的method名。上述代码还可以简写为：
```
rules: {
    username: "required"
}
```
另外，rules中还可以设定多个rule，每个rule中也可以设定多个method，比如：
```
rules: {
    username: "required",
    password: {
        required: true,
        minlength: 4    //4被认为是参数param
    }
}
```
html标签属性：
```

<input type="text" name="username" required />

<input type="password" name="password" required minlength="4" />
```
为了契合和Html5规范，validate的一些内置method可以不用带属性值（默认为true），但我们自定义method时，必须声明属性值（会被作为后文method的参数param），否则验证无法生效（除非再采取其他手段，略）

validate()中的option还可以包含：

messages：验证失败消息
ignore：忽略某些element的验证
onsubmit：自定义表单提交时事件处理程序
errorClass：message的样式
……

自定义method

需要使用$.validator.addMethod(name,method,message)方法：

name：method的名字，不能重复
message：自定义的错误提示

其中，method是一个回调函数，又可以包含三个参数：

value：用户输入/选择的值
element：被验证的element（JQuery）对象
param：比如上文minlength对应的4

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实现自定义的验证。尤其是验证需要不止一个元素的时候，比如：

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

其核心在于：

利用参数

新的验证规则首先还是要使用addMethod()添加新的method，但是，注意其回调函数中可以传入一个param：

            $.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 的效果