nice-validator 依赖 jQuery(1.7+)。除了直接引用插件,还支持 AMD 模块系统。
一行代码引入插件,local 参数用来加载对应的配置文件。如果不传 local 参数,配置以及样式就需要自行引入
<script src="path/to/nice-validator/jquery.validator.js?local=zh-CN"></script>
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)"
a. 前面的 display: 是可选的,用于替换错误消息中的{0},一般为显示的字段名。 b. 多个规则由分号(;)分开,末尾分号可省略,不限制规则数量,按规则先后顺序执行验证 c. 未定义的规则自动忽略,对验证不产生影响
规则语句中的符号:
;
- 分隔多个规则,也代表逻辑与:
- 分隔 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"
示例: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)"
}
});
插件内置 8 个规则:
自定义规则如果与内置规则同名,则自定义规则优先
详情参考内置规则
详情参考自定义规则
示例:在 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'
}
});