nice Validator验证插件

西门飞星
2023-12-01

1. 加载插件

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

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"

(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 个规则:

自定义规则如果与内置规则同名,则自定义规则优先
详情参考内置规则

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

 类似资料: