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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
js+css实现红包雨效果
Jul 12 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
JavaScript实现京东快递单号查询
Nov 30 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PDO实现学生管理系统
2020/03/21 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
js单例模式的两种方案
2013/10/22 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
python开发入门——set的使用
2020/09/03 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
医务人员自我评价
2014/01/26 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
大专护理专业自荐信
2015/03/25 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
Django框架模板用法详解
2022/06/10 Python