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 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
DOM 事件流详解
Jan 20 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
JavaScript编写开发动态时钟
Jul 29 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基础教程 php内置函数实例教程
2012/08/21 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
Python字符串详细介绍
2015/05/09 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
python实现最短路径的实例方法
2020/07/19 Python
木工主管岗位职责
2013/12/08 职场文书
小学数学课后反思
2014/04/23 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
中学生逃课检讨书
2015/02/17 职场文书
学校实习推荐信
2015/03/27 职场文书
2016党员入党决心书
2015/09/22 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python