其它

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > 其它 > 表单验证data-rule—Nice-validator插件

FastAdmin表单验证data-rule插件—Nice-validator的使用方法

投稿：yin

FastAdmin的表单验证data-rule非常方便,也很炫酷,采用的Nice-validator是一款非常强大的表单验证插件,通过简单在元素上配置规则,即可达到验证的效果,怎么使用Nice-validator插件呢

FastAdmin的表单验证data-rule非常方便，也很炫酷。采用的Nice-validator是一款非常强大的表单验证插件，通过简单在元素上配置规则，即可达到验证的效果。怎么使用Nice-validator插件呢？

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)、规则语句中的符号：

示例：

// 单个规则
"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'
    }
});

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>

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

到此这篇关于FastAdmin表单验证data-rule插件—Nice-validator的使用方法的文章就介绍到这了,更多相关表单验证data-rule—Nice-validator插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文