nice Validator 领先的表单验证解决方案

加载插件

nice-validator 依赖 jQuery(1.7+)。除了直接引用插件，还支持 AMD 模块系统。

(1)、直接引用

一行代码引入插件，local 参数用来加载对应的配置文件。如果不传 local 参数，配置以及样式就需要自行引入

<script src="path/to/nice-validator/jquery.validator.js?local=zh-CN"></script>

(2)、通过 RequireJS 模块系统

requirejs.config({    paths: {        jquery: 'http://cdn.jsdelivr.net/jquery/1.12.3/jquery.min',        validator: 'path/to/nice-validator/local/zh-CN'    },    shim: {        validator: ['path/to/nice-validator/jquery.validator.js?css']    }});require(['jquery', 'validator'], function($){    $('#form1').validator();});

了解规则

(1)、定义规则语句

"display: rule1; rule2(p1, p2); ...rulen(n1~n2)"

a. 前面的 display: 是可选的，用于替换错误消息中显示的字段名。
b. 每条规则之间用分号（;）分隔，分号后可以有空格，不限规则数量，规则越靠前越先被验证
c. 如果一条规则被定义为可以传参数，那么所有参数需要使用圆括号（()）或者方括号（[]）括起来；
d. 如果规则有多个参数，那么每个参数之间需要使用“逗号+空格”隔开
e. 如果出现未定义的规则，对验证不会产生影响

规则语句中的符号

分号 ; - 分隔多个规则，也代表逻辑与
冒号 : - 分隔 display（字段显示名）与规则语句
括号 () - 字段传参使用，也可以使用方括号（[ ]）
逗号 , - 分隔单个规则的多个参数，注意：逗号后需加空格
波浪 ~ - 定义范围值使用

示例：

// 单个规则"required"// 多个规则"required; email; remote(/server/check/email)"// 范围参数"range(1~100)"// 规则有多个参数"match(neq, oldPassword)"// 定义显示替换名称"邮箱: required; email"

(2)、配置规则

a. 在 DOM 中配置规则，使用 data-rule
b. 在 JS 中配置规则，使用 fields 参数

示例：DOM 配置规则

<input name="email" data-rule="required;email;remote(/path/to/server)">

示例：JS 配置规则

$("#form").validator({    fields: {        email: "required;email;remote(/path/to/server)"    }});

(3)、内置规则

内置规则为插件核心自带，在自定义规则的时候如果重名，则自定义的规则优先

nice-validator 内置 8 个规则，包括：

(4)、自定义规则

a. 可以使用正则表达式或者函数
b. DOM 方式使用 data-rule-* = "[RegExp, 'errorMessage']"
c. JS 方式使用 rules 参数配置规则

示例：在 local/zh-CN.js 中配置全局规则（全局生效）

$.validator.config({    rules: {        mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],        chinese: [/^[\u0391-\uFFE5]+$/, "请填写中文字符"]    }});

示例：通过 DOM 方式自定义规则（只对当前字段有效）

<input name="demo" data-rule="required; xxx" data-rule-xxx="[/^\d{6}$/, '请输入6位数字']">

示例：通过 rules 配置规则（当前表单实例有效）

$('#form1').validator({    rules: {        // 使用正则表达式定义规则        mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],        // 使用函数定义规则        xxx: function(elem, param) {            return /^1[3458]\d{9}$/.test($(elem).val()) || '请检查手机号格式';         }    },    fields: {        // 对字段 username 应用规则 mobile        'username': 'required;mobile'    }});

初始化验证

nice-validator 支持 JS 和 DOM 两种方式初始化验证

(1)、DOM 绑定规则，无需 JS 代码

<form id="form1" action="register.php">    <label>Email</label>    <input type="email" name="email" data-rule="required;email">    <label>Password</label>    <input type="password" name="pwd" data-rule="required;length(6~16)"></form>

(2)、JS 配置规则，无侵入 DOM

调用插件方法 .validator()，并使用 fileds 参数

<form id="form1" action="register.php">    <label>Email</label>    <input type="email" name="email">    <label>Password</label>    <input type="password" name="pwd"></form>

// 初始化验证$('#form1').validator({    fields: {        'email': 'required;email',        'pwd': 'required;length(6~16)'    }});

当然，DOM 和 JS 两种方式也支持同时使用，你也可以通过 DOM 绑定规则，然后使用 js 初始化。

提交表单

nice-validator 一旦初始化就会阻止表单被提交，直到表单规则全部验证通过。
如果传递了valid参数回调或者valid.form事件，表单即使验证通过也不会被提交，而是由valid参数和valid.form事件接管。然后你需要自己决定如何提交表单。

可以通过以下三种方式提交表单：

示例：点击提交按钮，表单验证通过后自动原生方式提交

<form id="form1" action="register.php">    <label>Email</label>    <input type="email" name="email" data-rule="required;email">    <label>Password</label>    <input type="password" name="pwd" data-rule="required;length(6~16)">    <button type="submit">提交</button></form>

示例：使用 valid 参数，并且使用原生 form 提交

$('#form1').validator({    valid: function(form) {        // do something        // use native submit.        form.submit();    }});

示例：绑定表单验证通过的事件，使用 ajax 提交表单

$('#form1').on('valid.form', function(e){    // You can do something, then submit form by native    // this.submit();    // or use ajax submit    $.post("path/to/server", $(this).serialize())        .done(function(d){            // some code        });});