推荐jQuery插件系列——表单验证formValidator
2023-09-14 08:57:27 时间
在开发各种BS架构的系统时表单验证是每个系统、网站都要做的一件事情,在客户端拦截用户的输入、选择是否合法从而降低对服务端的压力也增加用户体验,一般来说都会简单的验证必输项是否为空,或者必选项是否已选择,复杂一点的比如在注册时实时验证用户名是否重复,如此等等
在开发账务管理系统的时候开始想使用自己在公司项目中写的一个验证方法,但是后来想想感觉功能太单调了,虽然能够满足系统的要求但是用户体验不好,所有的错误提示都是使用的alert的方式提示用户,而且没有实时验证的功能,最终放弃了;然后就在jQuery官网插件上搜索关于验证的插件,刚刚说的几个功能都得满足,找了几个最终选择了formValidator,下面是摘自插件官网上的:
本插件于其他校验控件最大的区别有3点: 1、校验功能可以扩展。 对 中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号 码、日期等等这些控制,别的表单校验控件是代码里写死的,而formValidator是通过外部js文件来扩展的,你可以通过写正则表达式和函数来无限的扩展这些功能。 2、实现了校验代码于html代码的完全分离。 你的所有信息都无需配置在校验表单元素上,你只要在js上配置你的信息。使美工(界面)和javascript工程师的工作不交织在一起 3、你只需写一行代码就能完成一个表单元素的所有校验。你只需要写一行代码就能完成一下所有的控制
支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。
支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。
支持4种状态的信息提示功能,可以灵活的控制4种状态是否显示。第一种:刚打开网页的时候进行提示;第二种:获得焦点的时候进行提示;第三种:失去焦点时,校验成功时候的提示;第四种:失去焦点时,校验失败的错误提示。
支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型;选择的个数支持radio/checkbox/select三种控件
大家可以到formValidator 官网上去查看具体效果及其使用方法,也可以在晚上7点之后访问我在账务管理系统中的实际应用效果供大家参考
但是目前jQuery的版本更新到了1.3弃用了1.1和1.2版本中@写法,例如选择一个已选择的radio在1.1或者1.2版本中可以这样写:
alert($(":radio[@checked]").length);
但是在1.3中就不可以这样写,1.3的写法:
alert($(":radio:checked").length);
所以当我前段时间更新到1.3版本中就出现问题了,我上传一个我修改过的版本供大家下载:
[download#10#format=1]
相关文章
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- 实现单页浮动导航效果的 jQuery 插件:Smint
- 50个必备的实用jQuery代码段详解编程语言
- jQuery图片切换插件jquery.cycle.js详解编程语言
- jquery参考手册详解编程语言
- jValidate基于jQuery的表单验证插件
- 再次分享18个非常棒的jQuery表格插件
- 小试JQuery的AutoComplete插件
- 非常有用的40款jQuery插件推荐(系列二)
- Jquery提交表单Form.js官方插件介绍
- Jquery瀑布流插件使用介绍
- jquery限制输入字数,并提示剩余字数实现代码
- jQuery插件-jRating评分插件源码分析及使用方法
- jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
- jQuery图片播放8款精美插件分享
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- jQuery提交多个表单的小例子
- jquery.messager.js插件导致页面抖动的解决方法
- jQuery焦点图切换特效插件封装实例
- JQuery中对Select的option项的添加、删除、取值
- jQuery借助插件Lavalamp实现导航条动态美化效果
- 基于jquery插件制作左右按钮与标题文字图片切换效果
- jquery原创弹出层折叠效果点击折叠弹出一个层
- Jquery插件编写简明教程
- jQuery的cookie插件实现保存用户登陆信息
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- 分享2个jQuery插件--jquery.fileupload与artdialog
- 限制上传文件大小和格式的jQuery插件实例