6种校验方式:
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"
自动构建提示层(AutoTip)
单个提示层跟随(SingleTip)
弹出提示内容(AlertTip)