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 基础问答三
Dec 03 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
实现单层json按照key字母顺序排序的示例
Dec 06 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 json_decode函数详细解析
2014/02/17 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
Python中的id()函数指的什么
2017/10/17 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
详解python statistics模块及函数用法
2019/10/27 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
大学生活学习的自我评价
2013/12/03 职场文书
《雷雨》教学反思
2014/02/20 职场文书
服装设计专业求职信
2014/06/16 职场文书
学生自我评语
2015/01/04 职场文书
兵马俑导游词
2015/02/02 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
谢师宴家长答谢词
2015/09/30 职场文书