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 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
react build 后打包发布总结
Aug 24 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
星际争霸兵种名称对照表
2020/03/04 星际争霸
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
JS重要知识点小结
2011/11/06 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
基于webpack.config.js 参数详解
2018/03/20 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
财务会计专业毕业生自荐信
2013/10/19 职场文书
医科大学生的自我评价
2013/12/04 职场文书
中国入世承诺
2014/04/01 职场文书
安全保证书范文
2014/04/29 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
大四学生个人总结
2015/02/15 职场文书
天堂的孩子观后感
2015/06/11 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技