jQuery formValidator表单验证插件一些摘要和例子

6种校验方式:

inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的 控制)

inputValidator

概述

针对input、textarea、select控件的字符长度、值范围、选择个数的控制

支持的控件类型

text(文本框)、radio(单选框)、checkbox(复选框)、file(文件选择器)、password(密码框)、textarea(多行编辑框)、select(选择框)

选项

typeObject

(默认: "size") 属性名:比较类型。 值有以下几个类型:

"size":表示字符长度/(checkbox/radio)选择的个数

"number":数值型比较

"string":字符型比较

"date":短日期类型

"datetime":长日期类型

minObject

(默认: 0) 属性名:最小长度/值。 默认数值型,表示对选择个数或长度。

对checkbox/radio而言表示选中控件的个数

对text(文本框)、password(密码框)、textarea(多行编辑框)而言表示输入值的字符长度或值的大小

对select-one而言inputValidator里的参数min和max表示选择的索引号范围

对select-multiple而言inputValidator里的参数min和max表示选择的个数

maxObject

(默认: 99999) 属性名:最大长度/值。 同上min属性

onErrorString

(默认: 输入错误) 属性名:发生错误的提示。 发生错误时候的提示。为空则不显示。

onErrorMinString

属性名:比min属性小的提示。 当用户输入的值比min属性小的时候的错误提示

$("#nl").formValidator({
autoModify:true,
onShow:"请输入的年龄(1-99岁之间)",
onFocus:"只能输入1-99之间的数字哦",
onCorrect:"恭喜你,你输对了"
}).
inputValidator({
min:1,
max:99,
type:"value",
onErrorMin:"你输入的值必须大于等于1",
onError:"年龄必须在1-99之间,请确认"
});

onErrorMaxString

属性名:比max属性大的提示。 当用户输入的值比max属性大的时候的错误提示

emptyJson

属性名:是否允许两边为空。 默认两遍允许为空,默认值{leftEmpty:true,rightEmpty:true,emptyError:null}

leftEmpty:表示左边是否允许为空

rightEmpty:表示右边是否允许为空

emptyError:出现该错误的时候的提示,如果为null,则利用onError属性来提示错误。

示例

描述:

校验【用户名:input-text控件:username】的长度,必须在4-10之间

jQuery 代码:
$("#username").formValidator({


onShow:"请输入用户名",


onFocus:"用户名至少4个字符,最多10个字符",


onCorrect:"该用户名可以注册"


})


.inputValidator({


min:4,max:10,


onError:"你输入的用户名非法,请确认"


});

描述:

校验【年龄:input-text控件:nl】的值(数值),必须在1-99之间

jQuery 代码:
$("#nl").formValidator({


autoModify:true,


onShow:"请输入的年龄(1-99岁之间)",


onFocus:"只能输入1-99之间的数字哦",


onCorrect:"恭喜你,你输对了"


}).


inputValidator({


min:1,


max:99,


type:"value",


onErrorMin:"你输入的值必须大于等于1",


onError:"年龄必须在1-99之间,请确认"


});

描述:

校验【兴趣爱好:checkbox控件:xqah】至少选择2个,最多3个

jQuery 代码:
$(":checkbox[name='xqah']").formValidator({


onShow:"请选择你的兴趣爱好(至少选择2个,最多选择3个)",


onFocus:"你至少选择2个,最多选择3个",


onCorrect:"恭喜你,你选对了",


defaultValue:["7","8"]})


.inputValidator({


min:2,


max:3,


onError:"你选的个数不对(至少选择2个,最多选择3个)"


});


描述:

校验【学历:select控件:xueli】必须选择

jQuery 代码:
$("#xueli").formValidator({


onShow:"请选择你的学历",


onFocus:"学历必须选择",


onCorrect:"谢谢你的配合",


defaultValue:"a"})


.inputValidator({


min:1,


onError: "你是不是忘记选择学历了!"


}).defaultPassed();





compareValidator(提供2个对象的比较,目前可以比较字符串和数值型)

compareValidator

概述

提供2个对象的比较,目前可以比较字符串和数值型

支持的控件类型

text(文本框)、file(文件选择器)、password(密码框)、textarea(多行编辑框)

选项

desIDString

属性名:要比较控件的ID。 要跟源目标进行比较的目标ID

operateorString

(默认: "=") 属性名:比较符号。 一共有如下几种类型:=、!=、>、>=、<、<=

dataTypeString

(默认: "string") 属性名:数据类型。 目前只支持4种:"string"、"number","datetime","date"

onErrorString

(默认: "输入错误") 属性名:发生错误的提示。 发生错误时候的提示。为空则不显示。

示例

描述:

重复密码(password2)必须于密码(password2)一致

jQuery 代码:
$("#password2").formValidator({


onShow:"输再次输入密码",


onFocus:"至少1个长度",


onCorrect:"密码一致"})


.inputValidator({min:1,onError:"重复密码不能为空,请确认"})


.compareValidator({


desID:"password1",


operateor:"=",


onError:"2次密码不一致,请确认"


});

ajaxValidator(通过ajax到服务器上做 数据校验)

返回值:jQueryajaxValidator

概述

通过ajax到服务器上做数据校验

支持的控件类型

text(文本框)、file(文件选择器)、password(密码框)、textarea(多行编辑框)、select(选择框)

排错步骤

1、检查当前插件类库是否为最新版本

2、检查jQuery类库是否超过支持的最高版本(1.4.4)

3、检查URL路径是否正确,在服务端设置断点,看是否能执行到。

4、要一起提交给服务器的控件的formValidator函数里必须配置ajax:true

注意事项

1、在提交的时候,在URL后面自动追加clientID参数,表示触发校验的控件ID

2、在提交的时候,在URL后面自动追加rand参数,这个是个随机数,所以你不必再传递个当前时间戳

3、几乎所有的属性跟$.ajax()的属性一样,请参考$.ajax()函数的帮助

4、你的控件值不能直接串到url参数后面,这样是取不到值得,例如url:"你的网址.ashx?"+$("#控件ID").val()

选项

typeString

(默认: "GET") 属性名:请求的类型。 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

urlString

(默认: 当前页地址) 属性名:发送到的URL地址。 发送请求的地址。在服务器端,你可以通过name为clientid获取触发验证的控件ID名

dataTypeString

(默认: "html") 属性名:返回的数据类型。 xml、html、script、json、text

timeoutNumber

(默认: 999) 属性名:超时设置。 超时设置

dataObject,String

属性名:数据。

asyncBoolean

(默认: true) 属性名:是否异步发送。 是否以异步的方式发送

successFunction

属性名:成功时的回调函数。 你可以返回的类型有以下几种:

1、false。将显示onError信息到提示层上

2、true。将显示formValidator的onCorrect信息到提示层上

3、字符串。作用同false,返回的字符串将显示在提示层上

processDataObject,String

(默认: true) 属性名:是否转换为对象。 在默认的情况下,如果data选项传进的数据是一个对象而不是字符串,将会自动地被处理和转换成一个查询字符串

completeFunction

属性名:完成时的调用函数。 ajax请求结束的回调函数

beforeSendFunction

属性名:请求前时调用的函数。 ajax校验之前的回调函数,你可以返回true、false、字符串。如果返回字符串,表示校验失败,返回的信息当做错误信息显示出来。

buttonsString

属性名:你点提交的按钮(组)jQuery对象。 当你触发了ajax校验,在发送之前,buttons里对应的按钮(组)就会灰掉,一直等待服务器返回数据为止,就重新亮起来

errorFunction

属性名:失败时的回调函数。 失败时的回调函数

onWaitString

(默认: "正在等待服务器返回数据") 属性名:正在校验的提示。 已经发送,但是服务器还未返回数据时候的提示消息。

onErrorObject,String

(默认: "服务器校验没有通过") 属性名:校验没有通过的提示。 该参数的类型有2种

1、字符串。发生错误时候的提示消息。

2、函数。有两个参数,参数1:当前值 参数2:当前控件对象(dom)

示例

描述:

对用户名进行ajax校验

jQuery 代码:
$("#us").formValidator({onShow:"请输入用户名",onFocus:"用户名至少5个字符,最多10个字符",onCorrect:"该用户名可以注册"}).inputValidator({min:5,max:10,onError:"你输入的用户名非法,请确认"})


.ajaxValidator({


dataType : "html",


async : true,


url : "http://www.51gh.net/chkuser.aspx?act=ok",


success : function(data){


if( data.indexOf("此用户名可以注册!") > 0 ) return true;


return data;


},


buttons: $("#button"),


error: function(jqXHR, textStatus, errorThrown){alert("服务器没有返回数据,可能服务器忙,请重试"+errorThrown);},


onError : "该用户名不可用,请更换用户名",


onWait : "正在对用户名进行合法性校验,请稍候..."


})

regexValidator(提供可扩展的正则表达式库)

regexValidator

概述

利用正则表达式多输入格式进行校验

支持的控件类型

text(文本框)、file(文件选择器)、password(密码框)、textarea(多行编辑框)

选项

regExpObject

属性名:正则表达式或表达式数组。 参数类型分两类:

1、字符型。表示正则表达式或则枚举类型

2、字符数组型。表示正则表达式或则枚举类型的数组形式

采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符,所以在使用显示构造函数构造实例对象的时候,需要使用'\\' 代替'\'

paramString

(默认: "i") 属性名:附加参数。 值有以下几种类型:

g:代表可以进行全局匹配。

i:代表不区分大小写匹配。

m:代表可以进行多行匹配。

可以任意组合,当然也可以不加参数

compareTypeStringVer4.0.1新增

(默认: "||") 属性名:比较类型。 值有以下几种类型:

||:或的关系

&&:并列的关系

当regExp为数组的时候,当前这个参数就表示,数组里的正则表达式的相互关系。

dataTypeString

(默认: "string") 属性名:数据类型。 值有以下几种类型:

string:自己写的表达式

enum:枚举名。

一般情况下,枚举名在formValidatorReg.js里设置,该脚本里已经默认带了几个常用正则表达式。你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。

onErrorString

(默认: "输入错误") 属性名:发生错误的提示。 发生错误时候的提示。为空者不显示。

示例

描述:

验证录入的手机号码的合法性

jQuery 代码:
$("#shouji").formValidator({...})


.inputValidator({


min:11,


max:11,


onError:"手机号码必须是11位的,请确认"})


.regexValidator({


regExp:"mobile",


dataType:"enum", //如果是"string",则regExp必须是正则表达式


onError:"你输入的手机号码格式不正确"


});

描述:

输入框即可以是手机号码,也可以是电话号码

jQuery 代码:
$("#sjdh").formValidator({empty:true,onFocus:"格式例如:0577-88888888或11位手机号码"...})


.regexValidator({


regExp:["tel","mobile"],


dataType:"enum",


onError:"你输入的手机或电话格式不正确"


});

functionValidator (可使用外部函数来做校验,可以当做过程处理)

functionValidator

概述

利用外部函数来做校验

注意事项

插件会为外部函数传递两个参数:

1、当前值

2、当前控件对象。

你的外部函数起码要有一个参数,来接收当前的值。

支持的控件类型

text(文本框)、radio(单选框)、checkbox(复选框)、file(文件选择器)、password(密码框)、textarea(多行编辑框)、select(选择框)

选项

funFunction

属性名:外部函数名。 调用外部函数进行校验,提供2个参数:

参数1:元素的值,

参数2:元素对象。

返回值,有以下几种类型:

true: 校验成功

false: 校验失败

字符串:校验失败,返回值当作自定义错误信息,将显示在提示层上

无: 仅当一个处理过程。

onErrorString

(默认: "输入错误") 属性名:发生错误的提示。 发生错误时候的提示,为空则不显示。参数fun函数返回false的时候,显示该错误信息。

示例

描述:

调用外部函数对录入的身份证进行校验

jQuery 代码:
isCardID是个外部函数。


$("#sfzh").formValidator({onShow:"请输入15或18位的身份证",onFocus:"输入15或18位的身份证",onCorrect:"输入正确"})


.functionValidator({fun:isCardID});

描述:

直接写匿名函数判断用户名是否含关键字

jQuery 代码:
$("#us").formValidator({onShow:"用户名至少5个字符,最多10个字符"...})


.inputValidator({min:5,max:10,onError:"你输入的用户名非法,请确认"})


.functionValidator({fun:function(val){


if(val == "admin"){return "该用户名包含保留关键字"}


}});

passwordValidator(密码强度校验)

passwordValidator

概述

对密码强度进行校验

注意事项

1、如果你用的皮肤没有设置密码强度校验的相关内容,你是不能调用该函数的。

2、密码强度校验的规则,你可以在皮肤文件中修改。

支持的控件类型

password(密码框)

选项

compareIDString

(默认: "") 属性名:比较控件ID。 你要比较的控件ID。例如,密码不能于用户名相同,则该参数为用户名的ID,错误提示用参数onErrorCompareSame

onErrorCompareSameString

(默认: "密码于用户名相同不被允许") 属性名:值相同的错误提示。 该参数表示如果密码于compareID控件的值相同的错误提示。本参数要在compareID不为空的情况下才会起作用。如果想去掉该校验规则,本参数设置为空即可

onErrorContinueCharString

(默认: "密码字符为连续字符不被允许") 属性名:连续字符的错误提示。 默认不允许把连续字符当做密码。例如“123456”是非法密码。如果想去掉该校验规则,本参数设置为空即可

onErrorSameCharString

(默认: "密码字符都相同不被允许") 属性名:字符相同的错误提示。 默认不允许把相同字符当做密码。例如“111111”是非法密码。如果想去掉该校验规则,本参数设置为空即可

示例

描述:

密码强度校验。不允许连续字符、不允许字符相同,不允许于用户名相同,对应的错误提示都采用默认值

jQuery 代码:
$("#password1").formValidator({


pwdTipID:"password1PwdTip", //默认值可以不输入


onShow:"请输入密码",


onFocus:"至少1个长度",


onCorrect:"密码合法"})


.inputValidator({min:6,max:16,onError:"密码长度错误,请确认"})


.passwordValidator({


continueChar:false,


sameChar:false,


compareID:"us"


四种提示模式:

固定提示层(FixTip)

自动构建提示层(AutoTip)

单个提示层跟随(SingleTip)

弹出提示内容(AlertTip)