jQuery简单、智能、令人愉悦的表单验证方案nice Validator
智能：自动初始化、自动生成消息、只在需要时验证 灵活：主题机制、多规则绑定、丰富的事件、随意扩展、国际化支持 体验：支持实时验证与显示消息，4种消息类型，上下左右位置随你，提供对外API 简单：少量的参数，轻松上手，简单配置就可以定义消息主题 强大：规则动态性、分组验证支持、调试支持、通过DOM传参可不用初始化、超强适应能力。
1. 加载插件
nice-validator 依赖 [jQuery]1。除了直接引用插件，还支持 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();});
2. 了解规则
(1)、定义规则语句
"display: rule1; rule2(p1, p2); ...rulen(n1~n2)"
前面的 display: 是可选的，用于替换错误消息中的{0}，一般为显示的字段名。
多个规则由分号（;）分开，末尾分号可省略，不限制规则数量，按规则先后顺序执行验证
未定义的规则自动忽略，对验证不产生影响
规则语句中的符号：
分号 ; - 分隔多个规则，也代表逻辑与
冒号 : - 分隔 display（字段显示名）与规则语句
括号 () - 规则传参使用，也可以使用方括号（[ ]）
逗号 , - 分隔规则的参数，注意：逗号后需加空格
波浪 ~ - 定义范围值使用
俺的 & - 逻辑与，用在某个规则前面，与;（分号）效果差不多
叹号 ! - 逻辑非，用在某个规则前面，对规则取反
竖线 | - 逻辑或，用在多个规则之间，多个规则满足之一则通过
示例：
// 单个规则"required"// 多个规则"required; email; remote(/server/check/email)"// 范围参数"range(1~100)"// 规则有多个参数"match(neq, oldPassword)"// 定义显示替换名称"邮箱: required; email"// 逻辑或"required; mobile|email; remote(/server/check/user)"// 逻辑非"required; !digits"
(2)、配置规则
示例：DOM 配置规则，使用 data-rule
<input name="email" data-rule="required;email;remote(/path/to/server)">
示例：JS 配置规则，使用 fields 参数
$("#form").validator({
fields: {
email: "required;email;remote(/path/to/server)"
}});
(3)、内置规则
插件内置 8 个规则：
required - 使字段必填
checked - 必选，还可以控制选择项目的数量
match - 当前字段与另一个字段比较
remote - 获取服务器端验证的结果
integer - 只能填写整数
range - 只能填写指定范围的数
length - 字段值必须符合指定长度
filter - 过滤当前字段的值，不做验证
自定义规则如果与内置规则同名，则自定义规则优先
详情参考内置规则
(4)、自定义规则
详情参考自定义规则
示例：在 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'
}});3. 初始化验证
(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>
参考DOM 绑定
(2)、JS 配置规则，无侵入 DOM
<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)'
}});
调用插件方法 .validator()，并使用 fileds 参数
当然，DOM 和 JS 两种方式也支持同时使用，你也可以通过 DOM 绑定规则，然后使用 js 初始化。
4. 提交表单
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）
$('#form1').validator({
valid: function(form) {
// do something // use native submit. form.submit();
}});示例三：绑定表单验证通过的事件（参考：valid.form事件）
$('#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 });});
