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
相关链接
- 项目地址: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/
Nice validator领先的表单验证解决方案 转的更多相关文章
- jquery 表单验证插件
其他: <form action=""> First name: <input type="text" name="FirstNam ...
- Validate表单验证插件之常用参数介绍
Validate常用的一些参数和方法 1.errorElement 修改显示错误提示信息的HTML标签.默认是<label>,可以指定为<span>.... $("# ...
- jQuery 表单验证 jquery.validator.js
前端开发中经常会碰到表单的制作,其中必备的功能就是提交前的一些简单的验证,非空啊.手机号码啊.E-mail等等等等,这里是一个 jQuery 的表单验证插件,蛮好用的,收录一下. 下面是验证的效果图: ...
- [php基础]PHP Form表单验证:PHP form validator使用说明
在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- element-ui+vuex共享自定义方法进行表单验证 validator
element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方法共享出来,各个组件都能用呢? 如下是一个验证age的数据, rules:{ age:[{ ...
- 表单验证插件-validator.js 使用教程
做网站的时候,常常会涉及到各种表单验证.选择一款好用的表单验证插件,会降低表单验证开发的难度.在开发中,我目前使用的表单验证插件是:validator.js. validator.js 是一款轻量的表 ...
- 自定义表单验证--jquery validator addMethod的使用
原文地址:jquery validator addMethod 方法的使用作者:蜡笔小玄 jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目 ...
- angular4 自定义表单验证Validator
表单的验证条件有时候满足不了需求就可以自定义验证 唯一要求返回是ValidatorFn export interface ValidatorFn{ (c:AbstractControl):Valida ...
- WCF服务实现客户端Cookie共享,表单验证的解决方案
基于前几篇的文章,如果理解了通道 拦截器 服务转发的概念,相信你肯定也能理解咋的玩了. 说白了就是创建客户端的拦截器: 实现接口:IClientMessageInspector. 里面的方法就是客户 ...
随机推荐
- 调度思路+EurekaServer获得当前机器的instanceid
调度思路 概念 Build 一次完整的构建 整个流水线 Task(BuidStep) 流水线中的某一个步骤单元 先假设对于一个Build(流水线)而言里面所有Task是串行执行的 并且各Task之间不 ...
- JavaScript入门介绍(二)
JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...
- C语言结构体中的函数指针
这篇文章简单的叙述一下函数指针在结构体中的应用,为后面的一系列文章打下基础 本文地址:http://www.cnblogs.com/archimedes/p/function-pointer-in ...
- 定时工作方式2实现1s定时
定时器的几种工作方式中,除0和前面的1类似都需要初始化计数值,然后开始计数,计数溢出后,需要再次控制计数的初值,但工作模式2不同于此,工作方式2将THx和TLx分开处理,将初值存放在THx中,计数时只 ...
- Asp.net MVC2中你必须知道的扩展点(一):Controller Factory
Asp.net mvc2中提供很多可以扩展的地方,利用这些扩展之后,asp.net mvc使用起来更加灵活.Simone Chiaretta曾写过一篇文章:13 ASP.NET MVC extensi ...
- LightOj_1287 Where to Run
题目链接 题意: 有n个街口和m条街道, 你后边跟着警察,你需要进行大逃亡(又是大爱的抢银行啊),在每个街口你都有≥1个选择, 1)停留在原地5分钟. 2)如果这个街口可以到xi这个街口, 并且, 通 ...
- 【转载】TCP保活(TCP keepalive)
下图是我遇到tcp keepalive的例子: 以下为转载: TCP保活的缘起 双方建立交互的连接,但是并不是一直存在数据交互,有些连接会在数据交互完毕后,主动释放连接,而有些不会,那么在长时间无数据 ...
- C#中引用(ref关键字)参数
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 函数的参 ...
- bzoj 3858: Number Transformation 暴力
3858: Number Transformation Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 82 Solved: 41[Submit][Sta ...
- 【HDU 3435】 A new Graph Game (KM|费用流)
A new Graph Game Problem Description An undirected graph is a graph in which the nodes are connected ...