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 处理URL实用技巧
Nov 23 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
理解javascript中的with关键字
Feb 15 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
不到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
codeigniter框架批量插入数据
2014/01/09 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
FCK调用方法..
2006/12/21 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
python实现简单购物商城
2016/05/21 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python常用算法学习基础教程
2017/04/13 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
python生成二维码的实例详解
2017/10/29 Python
python实现图片处理和特征提取详解
2017/11/13 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
python 将Excel转Word的示例
2021/03/02 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
《彩色世界》教学反思
2014/04/12 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
交通工程专业推荐信
2014/09/06 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
python装饰器代码解析
2022/03/23 Python