开发者社区> 咖啡兔子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

推荐jQuery插件系列——表单验证formValidator

简介:
+关注继续查看

在开发各种BS架构的系统时表单验证是每个系统、网站都要做的一件事情,在客户端拦截用户的输入、选择是否合法从而降低对服务端的压力也增加用户体验,一般来说都会简单的验证必输项是否为空,或者必选项是否已选择,复杂一点的比如在注册时实时验证用户名是否重复,如此等等

在开发账务管理系统的时候开始想使用自己在公司项目中写的一个验证方法,但是后来想想感觉功能太单调了,虽然能够满足系统的要求但是用户体验不好,所有的错误提示都是使用的alert的方式提示用户,而且没有实时验证的功能,最终放弃了;然后就在jQuery官网插件上搜索关于验证的插件,刚刚说的几个功能都得满足,找了几个最终选择了formValidator,下面是摘自插件官网上的:


本插件于其他校验控件最大的区别有3点:

1、校验功能可以扩展。
   对 中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号 码、日期等等这些控制,别的表单校验控件是代码里写死的,而formValidator是通过外部js文件来扩展的,你可以通过写正则表达式和函数来无限的扩展这些功能。

2、实现了校验代码于html代码的完全分离。
你的所有信息都无需配置在校验表单元素上,你只要在js上配置你的信息。使美工(界面)和javascript工程师的工作不交织在一起

3、你只需写一行代码就能完成一个表单元素的所有校验。你只需要写一行代码就能完成一下所有的控制

    
支持所有类型客户端控件的校验

    
支持jQuery所有的选择器语法,只要控件有唯一ID和type属性

    
支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。

    
支持2种校验模式。第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式)

    
支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。

    
支持4种状态的信息提示功能,可以灵活的控制4种状态是否显示。第一种:刚打开网页的时候进行提示;第二种:获得焦点的时候进行提示;第三种:失去焦点时,校验成功时候的提示;第四种:失去焦点时,校验失败的错误提示。

    
支持自动构建提示层。可以进行精确的定位。

    
支持自定义错误提示信息。

    
支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型;选择的个数支持radio/checkbox/select三种控件

    
支持2个控件值的比较。目前可以比较字符串和数值型。

    
支持服务器端校验。

    
支持输入格式的校验。


大家可以到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以及案例
表单验证插件jquery-validation以及案例
33 0
JQuery验证插件validation的使用
下载:        下载validatation插件地址:jqueryvalidation.org/;这里需要注意的是validation验证插件有依赖于JQuery的,所以连同JQuery也要一起放置到项目中。
6023 0
推荐40个简单的 jQuery 导航插件和教程【下篇】
  在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程。导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容。
652 0
推荐40款强大的 jQuery 导航插件和教程【上篇】
  在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程。导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容。
873 0
40款非常棒的 jQuery 插件和制作教程(系列二)
jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
1084 0
jquery插件整理篇(九)数据验证类
1. jQuery plugin: Validation jQuery校验插件。jQuery plugin: Validation 2. Masked Input Plugin 热点图书:www.hotbook.cn Masked Input这个jQuery插件让用户能够按照预先设定好的固定格式输入数据(如日期、电话号码等)。
767 0
40款非常棒的 jQuery 插件和制作教程(系列二)
  jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
962 0
ASP.NETmvc常用JQUERY插件收集【jquery.form.js】
离开WEBFORM 也就离开了大量的前端困境,刚一开始用MVC,真感觉好像在沙漠中行走,很想念以前的控件,都快想死了,很快发现原来JQUERY 有很多插件可以用,只怪自己平时不收集,用的时候才手忙脚乱   在ASP.
794 0
jquery插件 - 表单插件
Jquery Form Plugin是jquery最重要的插件之一,它利用AJAX技术在不引起页面刷新的情况下POST表单。主要有两个方法:ajaxform和ajaxsubmit。它会自动收集表单元素内容,决定如何管理提交进程。
1092 0
+关注
19
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载