当前位置:文档之家› jQuery formValidator表单验证插件

jQuery formValidator表单验证插件

jQuery formValidator表单验证插件是什么?jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。

你可以划分多个校验组,每个组的校验都是互不影响。

对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)脚本控制。

目前支持5种大的校验方式,分别是:inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、compareValidator(提供2个对象的比较,目前可以比较字符串和数值型)、ajaxValidator(通过ajax到服务器上做数据校验)、regexValidator(提供可扩展的正则表达式库)、functionValidator (可使用外部函数来做校验)本插件于其他校验控件最大的区别有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个控件值的比较。

目前可以比较字符串和数值型。

∙支持服务器端校验。

∙支持输入格式的校验。

∙更新记录2009/1/24 13:59:00 jQuery formValidator 3.3ver在升级的过程中发现了一些bug,在这个版本里做了修正;使用新版的jQuery 类库,精简了不少代码。

1、升级的过程中,把inputvalidator函数的里的属性defaultvalue弄错了,导致默认值都失效。

现更正为如下:最后一个版本属性名为defaultval,现更正为了原来的属性名defaultvalue checkbox和radio以及select控件都必须用数组进行初始化,请看demo1里的几个控件的默认值。

2、ajaxvalidator是大家问的最多的问题,修正一个bug(感谢网友“じ龍峸√”),并把大家最关心的问题,再做一次阐述。

bug现象:无论校验有没有校验通过,当控件再次得到焦点而再次失去焦点的时候tip里的提示就会停滞在得到焦点的提示历次升级的相关记录:a、为AjaxValidator添加一个addidvalue属性(是否自动添加id和值到url 参数后面)为了修复AjaxValidator在配置信息的时候,取不到运行时候值的bug,插件将自动在url后面自动添加,形式为"id=value"的网页参数。

在服务器端,你可以通过Request.querystring["id"]来取值。

具体演示请看demo1里的用户名输入和Default.aspxb、AjaxValidator校验方式,将自动再增加一个参数到请求的地址后面"clientid=触发校验的表单ID"。

如果你是一个jQuery集合做校验,如果用到了AjaxValidator校验方式,在服务器端,你无法知道触发校验的是哪个表单元素,所以在请求的地址后面追加"clientid=触发校验的表单ID"。

3、上次更新的过程中,压缩包里忘记放入datepicker日期控件,一起更正2008/12/7 01:44:00 jQuery formValidator 3.2ver1、为compareValidator里的datatype属性增加新的类型:date、datetime。

那么到目前为止,插件支持4种常类型:"string"、"number"、"date"、"datetime",默认值为"string"2、为inputValidator里的属性type增加类型为date、datetime,min和max 必须为string类型,会自动转换"size":表示比较长度,默认值"number":数值型比较"string":字符型比较"date":短日期类型"datetime":长日期类型3、initConfig增加属性errorfocus,表示发生错误的时候,第一个出错控件是否获得焦点。

默认获得焦点。

4、initConfig增加属性forcevalid属性;formValidator增加forcevalid属性,表示是否一直输入正确为止才允许离开焦点。

initConfig的forcevalid优先等级最高,即全局配置;而formValidator里的forcevalid是局部设置。

5、initConfig增加属性wideword,默认为false,表示是否把一个汉字当做一个长度的参数。

请见demo1最上面的按钮演示。

6、增加ajaxValidator对password控件的支持7、修正升级中出现的一些bug,现都已修复在升级的过程中,公用一个tip的功能丢失了。

bug描述:只显示第一个控件的信息,后面的控件正确与否都不理睬。

ajaxValidator的一些状态显示bug2008/7/17 14:12:00 jQuery formValidator 3.1ver1、为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个提问。

2008/6/21 19:05:00 jQuery formValidator 3.0ver这次插件做了比较大的功能性升级。

首先感谢网友“宇赫”和“axeon”在这次代码升级中给予的建议和支持。

针对这次升级,所有的相关文档都已经修改,再次感谢网友“宇赫”在修改文档和测试的时候给予的帮助。

1、修改了插件公共函数和函数属性的命名。

你可以用压缩包里update.exe程序自动更改你的校验代码。

所有的函数,首字母小写,其它单词首字母大写(匈牙利命名规范)。

例如:PageIsValid改成pageIsValid所有的属性全部小写。

2、自动注册$.formValidator.pageIsValid()函数,为initConfig添加formid 属性,表示表单ID号。

如果formid为空,必须按照以前的方法自行判断,自己注册$.formValidator.pageIsValid()判断。

适用环境:如果你只有一个校验组,而且利用表单的submit来提交,你可以配置这个formid参数。

例如:$.formValidator.initConfig({formid:"form1",onerror:function(msg){aler t(msg)}});3、针对Input和Textarea两大类控件,你可以选择触发校验的事件,默认失去焦点的时候触发校验。

因此为inputValidator增加一个属性:triggerevent,默认值:"blur",你可以设置为"change"。

4、自动构建提示层,你可以不用设置提示的DIV了。

为initConfig函数添加属性:autotip,默认false,表示:是否开启自动构建提示层。

例如:$.formValidator.initConfig({formid:"form1",autotip:true,onerror:funct ion(msg){alert(msg)}});样式的引用,请引用validatorAuto.css,这个样式是专为自动构建提示层用的。

代码:<link type="text/css" rel="stylesheet"href="style/validatorAuto.css" />为formValidator函数添加属性:tipcss,用于定位自动提示层。

该属性为标准的css属性申明。

原tipid表示提示层相对位置的控件ID。

相关主题