Nice validator领先的表单验证解决方案 转

Posted 2020-08-20 sekai

Nice validator是一个简单智能的Web表单验证插件，可以验证现有的所有格式，比如邮箱地址、电话号码等，您还可以自定义规则验证，插件基于jQuery库，支持多种语言配置。

安装

1、您可以访问Nice validator的Github地址，下载Nice validator的源代码解压到你的项目中，然后通过下面的代码引入Nice validator文件。

local 参数用来加载对应的配置文件。如果不传 local 参数，配置以及样式就需要自行引入

<script src="nice-validator/jquery.validator.js?local=zh-CN"></script>

2、也通过 RequireJS 或者 Sea.js 模块系统安装

nice-validator 在 bower 和 npm 注册了 package，你可以通过以下命令安装 nice-validator 的最新版本。

通过 bower

$ bower install nice-validator

通过 npm

$ npm install nice-validator

注意：只能配置 nice-validator 为 local 下对应配置文件路径。

// requirejs 配置
requirejs.config({
    paths: {
        validator: ‘path/to/nice-validator/local/en‘
    }
});

// seajs 配置
seajs.config({
    alias: {
        validator: ‘path/to/nice-validator/local/zh-CN‘
    }
});

初始化验证

nice-validator 支持 JS 和 DOM 两种方式初始化验证，你可以根据自己的场景选择

(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

调用插件方法 .validator()，并使用 fileds 参数

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

当然，DOM 和 JS 两种方式也支持同时使用，你也可以通过 DOM 绑定规则，然后使用 js 初始化。

提交表单

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 参数，并且使用原生 form 提交

$(‘#form1‘).validator({
    fields: {
        ‘email‘: ‘required;email‘,
        ‘pwd‘: ‘required;length(6~16)‘
    },
    valid: function(form) {
        // do something
        // use native submit.
        form.submit();
    }
});

示例：绑定表单验证通过的事件，使用 ajaxSUbmit 提交表单

$(‘#form1‘).on(‘valid.form‘, function(e){
    $(this).ajaxSubmit();
});

浏览器兼容

• IE6+
• Chrome
• Safari 4+
• Firefox 3.5+
• Opera

相关链接

• 项目地址：http://validator.niceue.com/
• Github地址：https://github.com/niceue/nice-validator
• 官网文档：http://validator.niceue.com/docs/
• 问说网开源项目文档：http://www.uedsc.com/open/nice-validator
• 作者主页：http://www.niceue.com/