目前支持4种大的校验方式,分别是:InputValidator(针对input、 textarea、select控件)、CompareValidator、AjaxValidator、RegexValidator、 FunctionValidator 每种格式支持的控件类型如下:
| input | textarea | select | 校验方式 | text | radio | checkbox | file | password | textarea | select-one | InputValidator | √ | √ | √ | √ | √ | √ | √ | CompareValidator | √ | | | √ | √ | √ | | AjaxValidator | √ | | | √ | √ | √ | √ | RegexValidator | √ | | | √ | √ | √ | | FunctionValidator | √ | √ | √ | √ | √ | √ | √ | 如果你用了不支持的校验功能,插件将忽略这个校验功能。 |
插件目前提示错误,有两种模式:showword和 showalert,即文字提示和窗口提示,下面的5大验证方式,针对showalert这种方式不是都必须的,有些配置是没有作用的 下面分别罗列全局初始化和5种校验方式公开的属性 |
formValidator: | 用来做初始化的类型,必须先执行 |
属性 | 属性名称 | 默认值 | showword | showalert | 详细解释 | validatorGroup | 校验组 | "1" | √ | √ | 一个页面的控件可以分成多个组,分开校验 | empty | 是否可以为空 | false | √ | √ | | automodify | 输入错误离开焦点的时候,自动修复错误 | false | √ | √ | 先给出提示然后,自动修复,目前只支持text、file、textarea三种类型 | onempty | 空时候的提示 | "输入内容为空" | √ | | 可以为空,为空时候的提示 | onshow | 显示时候的提示 | "请输入内容" | √ | | | onfocus | 获得焦点的提示 | "请输入内容" | √ | | | oncorrect | 输入正确后的提示 | "输入正确" | √ | | 当你焦点离开控件的时候,如果输入正确将出现该提示 | onvalid | 校验通过后的回调函数 | null | √ | √ | 参数1:对象本身 参数2:值 校验通过后,你还希望执行一些操作,你可以通过这个属性来执行。 | onfocusevent | 获得焦点后要追加的回调函数 | null | √ | √ | 参数1:对象本身 | onblurevent | 失去焦点后要追加的回调函数 | null | √ | √ | 参数1:对象本身 | tipid | 显示错误的容器ID | 表单ID+"Tip" | √ | | | defaultvalue | 默认值 | null | √ | √ | 所有input和select表单。如果你不设置就保持原值,一旦设置就设为默认值。 | |
| | | |
InputValidator: | |
属性 | 属性名称 | 默认值 | 详细解释 | type | 比较类型 | "size" | (对select无效)"size":表示比较长度 "value":比较值。 | min | 最小长度/值 | 0 | (对select无效) | max | 最大长度/值 | 99999999999999 | (对select无效) | onerror | 发生错误的提示 | "输入错误" | | defaultvalue | 默认值 | null | 能满足预设默认值的需求 | |
| | | |
CompareValidator: | |
属性 | 属性名称 | 默认值 | 详细解释 | desID | 要比较控件的ID | "" | 要跟源目标进行比较的目标ID | operateor | 比较符号 | "=" | 一共有如下几种类型:=、!=、>、>=、<、<= | datatype | 数据类型 | "string" | 目前只支持2种:"string"、"number" | onerror | 发生错误的提示 | "输入错误" | | |
| | | |
RegexValidator: | |
属性 | 属性名称 | 默认值 | 详细解释 | regexp | 正则表达式 | "" | 采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符,所以在使用显示构造函数构造实例对象的时候,需要使用'\\' 代替'\' | param | 附加参数 | "i" | g:代表可以进行全局匹配。 i:代表不区分大小写匹配。 m:代表可以进行多行匹配。 可以任意组合,当然也可以不加参数 | datatype | 数据类型 | "string" | "string":自己写的表达式,"enum":枚举名。具体请见demo3.htm,你可以自己修改附加 pageValidatorRegex.js里的枚举项目名和表达式。 | onerror: | 发生错误的提示 | "输入错误" | | |
| | | |
AjaxValidator: | 几乎所有的属性跟$.ajax()的属性一样,请参考$.ajax()函数的帮助 |
属性 | 属性名称 | 默认值 | 详细解释 | type | 请求的类型 | "GET" | "POST" 或 "GET" | url | 发送到的URL地址 | "" | | datatype | 返回的数据类型 | "html" | xml、html、script、json | data | 数据 | "" | | async | 是否以异步的方式发送 | true | | success | 当请求成功时调用的函数 | null | | processdata | 自动处理返回的数据为字符串 | true | 在默认的情况下,如果data选项传进的数据是一个对象而不是字符串,将会自动地被处理和转换成一个查询字符串 | complete | 当请求完成时调用的函数 | null | | beforesend | 当请求前时调用的函数 | null | | error | 当请求失败时调用的函数 | "请求失败" | 你可以自己定义这个错误,在error里自动打出 | |
|
公共函数: | 主要是设置全局参数和判断是否通过校验 |
函数名 | 函数说明 | jQuery.formValidator.initConfig | 参数:配置类型
属性 | 默认值 | 说明 | validatorGroup | "1" | 你要针对哪个组进行配置 | alertMessage | false | 是否弹出窗口 | onSuccess | null | 该组校验通过后的回调函数,返回false,阻止表单的提交 | submitOnce | false | 校验通过后,是否灰掉所有的提交按钮 | onError | null | 该组校验失败后的回调函数 | | jQuery.formValidator.PageIsValid | 一个参数: 不是配置类型
validatorGroup | "1" | 你要针对哪个组进行验证 | | jQuery.formValidator.IsOneValid | 一个参数: 当时设置验证的表单元素ID。 返回是否校验成功的信息。 | jQuery.formValidator.SetFailState | function("tipid","显示的信息") 在showword模式下,如果你的额外校验没有通过,你可以通过它来设置成失败信息和状态 | jQuery.formValidator.GetLength | function("表单元素id") 判断表单元素的选择长度(个数) checkbox或radiobutton表示选择的个数。 select表示选择的selectedIndex值。 其它的表示字符长度。 | |
| | | |
问答: | | | |
1、如何实现一个控件,根据不同的情况,实现不同的控制? |
你只需要在你的不同种情况下,重新设置你的【一行代码】 |
|
2、一个页面上我有几个tab页,如何实现每个Tab页上的控件单独校验? |
每个Tab页上需要校验的控件,你在写【一行代码】的时候,显示的声明组号 |
|
3、我采用的页面上文字问题的方式,点提交的时候,有校验未通过的,除了文字提示外,还可以再弹出窗口提示吗? |
这个问题很简单,你只要设置改组的全局配置, jQuery.formValidator.initConfig({onError:function(){alert("有部分校验没有通过,请看页面具体提示");}}) |
|
4、所有校验通过后,我还要再做别的判断可以吗?我自己的判断没有通过可以中断提交吗? |
同样很简单,你页只需设置该组的全局配置, jQuery.formValidator.initConfig({onSuccess:function() { if(你的额外判断失败) return false; else return true; }}) |
|
5、我有一组的checkbox(radiobutton)如何设置校验? |
你只需在该组的第一个checkbox上设置校验信息即可,具体请参考demo1里的范例 如果你该组的第一个控件的ID ,你可以这么写:$("sex_1").InputValidator({...}) 如果你只知道该组的name,你可以这么写:$("input:check[@name='sex']").slice(0,1).InputValidator({...}) |
|
6、我有2个表单元素,任意一个元素输入东西就算验证通过,如何写代码?比如要求输入中文名字和英文名字任意一个即算校验通过。 |
正在开发这个功能 |
|
7、一个表单元素校验通过了,但是我想额外再进行其它的校验,出错要自定义错误,如何写代码? |
$("#ewjy").formValidator({onshow:"无论你输入什么,都会提示你额外校验出错,错误信息自定义",onfocus:"至少输入一个字符",oncorrect:"你怎么可能输入正确了,难道是 bug?",onvalid:function(){$.formValidator.SetFailState("ewjyTip","额外校验失败");alert("额外校验失败");return false;}}).InputValidator({min:1,onerror:"这里至少要一个字符,请确认"}); |
|
8、如何让赋了初始值的表单元素默认校验通过 |
$("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合",defaultvalue:"b"}).InputValidator({onerror: "你是不是忘记选择学历了!"}).DefaultPassed(); |