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 OOP类与继承
Nov 15 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
微信小程序实现时间进度条功能
Nov 17 Javascript
Vue父子之间值传递的实例教程
Jul 02 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中使用gd库实现下载网页中所有图片
2015/05/12 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
jstree的简单实例
2016/12/01 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Python闭包实现计数器的方法
2015/05/05 Python
Python线程指南详细介绍
2017/01/05 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
大学专科自荐信
2014/06/17 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
西游记读书笔记
2015/06/25 职场文书
升学宴学生致辞
2015/09/29 职场文书
导游词之青城山景区
2019/09/27 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
vue实现滑动解锁功能
2022/03/03 Vue.js