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函数般调用正则
Apr 08 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
vue递归获取父元素的元素实例
Aug 07 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
PHP数组实例总结与说明
2011/08/23 PHP
浅析php原型模式
2014/11/25 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
javascript实现简单留言板案例
2021/02/09 Javascript
Python中List.index()方法的使用教程
2015/05/20 Python
Python开发的HTTP库requests详解
2017/08/29 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
就业协议书范本
2014/04/11 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
2015年教务工作总结
2015/05/23 职场文书
PL350与SW11的比较
2021/04/22 无线电
MySQL update set 和 and的区别
2021/05/08 MySQL
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫