JQuery表单验证插件EasyValidator用法分析


Posted in Javascript onNovember 15, 2014

本文实例讲述了JQuery表单验证插件EasyValidator用法。分享给大家供大家参考。具体如下:

本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手。

DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧。

EasyValidator实现的功能:

1.提示功能(在表单或者其他标签中加入tip="想提示的文字")

如:

<input name="name" tip="请输入你的名字哟~">

或者

<a href="http://wangking717.iteye.com/blog/769021" tip="到EasyValidator官方主页来" target="_blank">有疑惑可以到这里提问</a>

2. 普通表单验证(在表单中加入reg="正则表达式")
如:

<input name="username" reg="正则" />

普通表单验证DEMO:http://easyvalidator.googlecode.com/svn/trunk/index.html

3. AJAX表单验证(在表单中加入url="验证系统地址")
如:

<input name="username" url="地址" />

AJAX验证DEMO:没有在线演示,请在本地运行ajax_demo.html,请求远程的PHP文件,当然可以为JSP或者ASP,我这里在程序里预设了一些已存在的数据,用户可以自行参考。

4. 普通表单验证 +  AJAX表单验证 (普通验证通过以后,再进行AJAX验证)
如:

<input name="username" reg="正则" url="地址" />

5. 扩展函数表单验证(某些业务特殊需求):

这些特殊需求都是根据业务来的,这里列举一下这样的情况:

1.checkbox选择框数量验证,如限制别人至少选择1个,最多选择5个checkbox。
2.多个表单之间进行比较,如【开始时间表单】一定小于等于【结束时间表单】或者两个密码表单要相等,用于注册的时候,等等。

由于这种情况的特殊性,所以用户得自己写业务逻辑代码,官方已经提供了extendsValidate扩展函数,在里面写自己的逻辑代码即可。

扩展函数表单验证DEMO:http://easyvalidator.googlecode.com/svn/trunk/extends_demo.html

JQuery表单验证插件EasyValidator用法分析

BUG修复日志:
2010-9-24 : 修复同一页多个FORM提交BUG ,TIP错位BUG
2010-9-26 : 新增bgiframe插件, 修复IE6下TIP 遮罩不了 SELECT表单
2010-9-27 : 增加扩展API,并重构核心库

2011-1-1   : 将表单验证的TIP独立出来,让TIP,URL,REG成为单独的组建而存在,更加灵活!

2011-1-28 : 修改了AJAX的TIP纠错BUG,逻辑修改,并且将AJAX的请求的远程程序validate_user.php的编码设置GB2312。

官方下载地址:http://code.google.com/p/easyvalidator/downloads/list

或者点击此处本站下载。https://3water.com/jiaoben/32303.html

在线正则验证器:http://regexpal.com/

希望本文所述对大家的web程序设计有所帮助。

Javascript 相关文章推荐
自动更新作用
Oct 08 Javascript
判断脚本加载是否完成的方法
May 26 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
Vue路由权限控制解析
Nov 09 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 #Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 #Javascript
jquery中append()与appendto()用法分析
Nov 14 #Javascript
jQuery 插件开发指南
Nov 14 #Javascript
使用JavaScript和C#中获得referer
Nov 14 #Javascript
JavaScript window.location对象
Nov 14 #Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 #Javascript
You might like
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
laravel自定义分页效果
2017/07/23 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
javascript定义函数的方法
2010/12/06 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
pandas取出重复数据的方法
2019/07/04 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
一套Java笔试题
2016/08/20 面试题
员工自我鉴定
2013/10/09 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
有趣的广告词
2014/03/18 职场文书
写得不错的求职信范文
2014/07/11 职场文书
公司授权委托书范文
2014/08/02 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
会计主管竞聘书
2015/09/15 职场文书