jQuery formValidator表单验证插件开源了 含API帮助、源码、示例


Posted in Javascript onAugust 14, 2008

2008-07-22 14:47 

bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态。

这个bug已经修复,请重新下载。 

2008/7/17 14:12:00 jQuery formValidator 3.1ver

1、为inputValidator增加empty属性。用于设置控件文本值是否允许两边为空。具体请看demo1里的密码的校验代码。
该属性是个对象,默认值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左边是否允许为空
rightempty:表示右边是否允许为空 
emptyerror:出现该错误的时候的提示,如果为null,则利用onerror属性来提示错误。 
注:只能在type:"size"的时候使用,即比较长度的时候。

2、修改自动构建提示层的语法。为formValidator函数增加relativeid属性。
relativeid:表示提示层相对定位的控件ID,如果为空,则用当前校验控件的ID。
tipid:表示自动创建的提示层的ID,如果为空,则用当前校验控件的ID+"Tip"来命名。

3、修正ajaxValidator函数里beforesend属性的bug。代码忘记传递它的唯一参数。

4、修正ajaxValidator函数在后台无法获取中文的bug。

5、更新了升级记录、用户手册、增加了2个提问。
1、现场演示 
http://img.3water.com/online/formValidator3.1/demo.html 

2、jQuery pageValidator插件主要功能   

支持所有类型客户端控件的校验 
支持jQuery所有的选择器语法,只要控件有唯一ID和type属性 
支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。 
支持2种校验模式。第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式) 
支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。 
支持4种状态的信息提示功能,可以灵活的控制4种状态是否显示。第一种:刚打开网页的时候进行提示;第二种:获得焦点的时候进行提示;第三种:失去焦点时,校验成功时候的提示;第四种:失去焦点时,校验失败的错误提示。 
支持自动构建提示层。可以进行精确的定位。 
支持自定义错误提示信息。 
支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型;选择的个数支持radio/checkbox/select三种控件 
支持2个控件值的比较。目前可以比较字符串和数值型。 
支持服务器端校验。 
支持输入格式的校验。   

3、jQuery formValidator插件 API帮助文档
帮助文档请点击这里 

4、下载API帮助、源码、示例
http://xiazai.3water.com/jslib/formValidator2.4.rar
http://xiazai.3water.com/jslib/formValidator3.1.rar

校验代码升级器

5、示例代码

<script type="text/javascript">
$(document).ready(function(){
 $.formValidator.initConfig({onError:function(){alert("校验没有通过,具体错误请看错误提示")}});
 $("#test1").formValidator({onshow:"请输入用户名",onfocus:"用户名至少6个字符,最多10个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"});

 $("#test2").formValidator({onshow:"请选择你的兴趣爱好(至少选择3个,最多选择5个)",onfocus:"你至少选择3个,最多选择5个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:3,max:5,onerror:"你选的个数不对(至少选择3个,最多选择5个)"});

 $("#test3").formValidator({onshow:"请选择你的兴趣爱好(至少选一个)",onfocus:"你至少选择1个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:1,onerror:"你选的个数不对"});

 $("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合"}).SelectValidator({onerror: "你是不是忘记选择学历了!"});

 $("#password1").formValidator({onshow:"请输入密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).InputValidator({min:1,onerror:"密码不能为空,请确认"}).CompareValidator({desID:"password2",operateor:"=",onerror:"2次密码不一致,请确认"});

 $("#nl").formValidator({onshow:"请输入的年龄(1-99岁之间)",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了"}).InputValidator({min:1,max:99,type:"value",onerror:"年龄必须在1-99之间,请确认"});

 $("#aiguo").formValidator({onshow:"爱国的人一定要选哦",onfocus:"你得认真思考哦",oncorrect:"不知道你爱不爱,反正你是选了"}).InputValidator({min:1,max:1,onerror:"难道你不爱国?你给我选!!!!"});

 $("#shouji").formValidator({empty:true,onshow:"请输入你的手机号码,可以为空哦",onfocus:"你要是输入了,必须输入正确",oncorrect:"谢谢你的合作",onempty:"你真的不想留手机号码啊?"}).InputValidator({min:11,max:11,onerror:"手机号码必须是11位的,请确认"}).RegexValidator({regexp:"^[1][0-9]{10}$",onerror:"你输入的手机格式不正确"});

 $("#lxdh").formValidator({empty:true,onshow:"请输入你的联系电话,可以为空哦",onfocus:"你要是输入了,必须输入正确,格式例如:0577-88069620",oncorrect:"谢谢你的合作",onempty:"你真的不想留联系电话了吗?"}).RegexValidator({regexp:"^[[0-9]{3}-|\[0-9]{4}-]?(\[0-9]{8}|[0-9]{7})?$",onerror:"你输入的联系电话格式不正确"});

 $("#ms").formValidator({onshow:"请输入你的描述",onfocus:"描述至少要输入10个汉字或20个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:20,onerror:"你输入的描述长度不正确,请确认"});
});
</script>

6、特别说明

如果你在使用过程中碰到什么问题请给我留言,发现bug请不要自行修改,也请留言,达到完善插件的目的,真正服务每个程序开发人员 .
请保留插件的版权申明,谢谢 

Javascript 相关文章推荐
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
jquery cookie的用法总结
Nov 18 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
jquery之Document元素选择器篇
Aug 14 #Javascript
JavaScript国旗变换效果代码
Aug 13 #Javascript
js活用事件触发对象动作
Aug 10 #Javascript
JS支持带x身份证号码验证函数
Aug 10 #Javascript
js获取div高度的代码
Aug 09 #Javascript
js可突破windows弹退效果代码
Aug 09 #Javascript
ext form 表单提交数据的方法小结
Aug 08 #Javascript
You might like
一个简单的MySQL数据浏览器
2006/10/09 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
分享python数据统计的一些小技巧
2016/07/21 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
彩妆大赛策划方案
2014/05/13 职场文书
校运会口号
2014/06/18 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server