jQuery智能表单验证方案nice validator

jQuery智能表单验证方案nice validator

jQuery简单、智能、令人愉悦的表单验证方案niceValidator智能:自动初始化
1
  • 详情内容
  • 留言点评

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        });});


欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
1

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看

老铁,为了让大家习惯在手机上用支付宝,年底马云家又疯狂了,用手机支付宝搜索“7629723”可以抢红包在实体店消费,玩法已升级,红包种类和金额都更嗨!