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实现多域名不同文件的调用方法
Jan 12 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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中操作Excel实例代码
2010/04/29 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
深入了解js原型模式
2019/05/30 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
微信小程序canvas动态时钟
2020/10/22 Javascript
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python人脸识别初探
2017/12/21 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
python交易记录整合交易类详解
2019/07/03 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
详解Python 中的容器 collections
2020/08/17 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
2014年小学重阳节活动策划方案
2014/09/16 职场文书
教师党员整改措施
2014/10/24 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
小学中队委竞选稿
2015/11/20 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript