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

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

相关链接

时间: 2024-10-10 04:21:40

Nice validator领先的表单验证解决方案 转的相关文章

表单验证插件-validator.js 使用教程

做网站的时候,常常会涉及到各种表单验证.选择一款好用的表单验证插件,会降低表单验证开发的难度.在开发中,我目前使用的表单验证插件是:validator.js. validator.js 是一款轻量的表单验证插件,代码总共只有两百多行. validator.js 是一款基于 zepto/jQuery 的表单验证插件,当 zepto.js 和 jQuery 同时加载在页面里面的时候,validator.js 会优先作用于 jQuery. 下面的代码说明了为啥 validator.js 会优先作用于

WCF服务实现客户端Cookie共享,表单验证的解决方案

基于前几篇的文章,如果理解了通道 拦截器  服务转发的概念,相信你肯定也能理解咋的玩了. 说白了就是创建客户端的拦截器: 实现接口:IClientMessageInspector. 里面的方法就是客户端在发送 和接受消息的 至于服务端是不是也有对应的拦截呢?答案是肯定的,这个接口就是:IDispatchMessageInspector 好吧 这里面的方法是在发送给具体服务实例之前,和处理完毕后,向客户端发送SOAP消息前的两个方法....... 从此作为切入点,获取客户端的表单验证的Cookie

jquery配合Bootstrap中的表单验证插件bootstrapValidator使用方法

使用bootstrap遇到表单校验,最常用的一款表单校验插件 github地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用: 将文件下载 或者用 git clone下来 1.引入css到head中,引入js到body结束标签的前面即可 提示: 默认是英语的,需要变成中文: 将github中dist中的\js\language\zh_CN.js 引入文件中即可 官方完整实例版: <!DOCTYPE html> <html>

jquery插件,表单验证validation plugin的使用

笔记: 一.首先引入插件 <script type="text/javascript" src="js/jquery-1.10.0.js" ></script> <script type="text/javascript" src="js/jquery.validate-1.13.1.js" ></script> 列子:一个简单的登录表单验证 1 <form id=&quo

struts2官方 中文教程 系列十一:使用XML进行表单验证

在本教程中,我们将讨论如何使用Struts 2的XML验证方法来验证表单字段中用户的输入.在前面的教程中,我们讨论了在Action类中使用validate方法验证用户的输入.使用单独的XML验证文件让您可以内置到Struts 2框架的验证器. 贴个本帖的地址,以免被爬:struts2官方 中文教程 系列十一:使用XML进行表单验证  即 http://www.cnblogs.com/linghaoxinpian/p/6938720.html 下载本章节代码 为了使用户能够编辑存储在Person对

Yii学习笔记之四(表单验证 api 翻译)

1.表单验证 对于用户输入的所有数据,你不能信任,必须加以验证. 所有框架如此,对于yii 可以使用函数 yii\base\Model::validate()  进行验证 他会返回boolean值的 true /false 如果验证未通过,可以使用 yii\base\Model::$errors 属性进行处理,如下代码: <?php //加载表单模型(绝对地址方式) /*如果上面引入 use app\models\ContactForm; 则可以直接使用 $model = new Contact

群里分享的react的收藏一下!今日周末,改了个表单验证然后无所事事了!

今日周末,改了个表单验证然后无所事事了,然后把昨天群里分享的react的收藏一下尽管现在还在研究angular和nodeJs毕竟刚刚开始用有点不熟...没准以后会研究一下react毕竟看着下面这张图还是觉得有点欢乐的 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,

JS表单验证类HTML代码实例

以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮点数验证.日期验证.邮件检查.网址验证.固定电话和手机号码验证.IP地址验证.邮编和QQ号码验证. MSN和身份证验证等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

好用的表单验证插件

在做项目过程中,使用了jquery的一个验证表单的插件--jquery validation.这里简单整理了一下这个强大的表单验证插件的一些常用的方法,以及在使用过程中需要注意的地方. 首先要想使用,首先需要引入jquery,然后引入jquery validation两个文件.然后通过插件的初始化方法,进行初始化,之后就可以按照自己的需要进行使用了. //引入jquery,版本1.6+ <script type="text/javascript" src="http:/