#validator.js
最后更新:2013-8-19 by RocShow
依赖库
- jQuery
- VldRUlesLib https://github.com/RocShow/VldRulesLib
Validator.js 对常用的表单验证方法进行了封装,提供了清晰易用的调用接口。
1.自动校验。实时侦测用户输入,实时校验
2.错误输入自动校正。根据不同的规则,对用户的错误输入提供合理的自动纠正
3.定时器与事件绑定切换。可自由选择使用定时器触发校验还是输入事件触发校验
4.校验结果细节展示。 对于有多个校验规则联合校验的情况,校验结果会显示每个校验规则的具体结果
5.内置31种常用校验规则
6.可灵活扩展新的校验规则
7.可使用自定义函数或正则表达式进行验证
典型的使用方式:
vld = new Validator([{
field: "#text1",
rule: ["required","max[10]"],
msg: "该项必填",
tipDir: "left",
tipOffset: {
left: -50,
},
dynamicVld: true
}, {
field: "#text2",
rule: ["min[3]","max[10]"],
msg: "长度必须在3到10之间",
tipOffset: {
left: 50,
},
dynamicVld: true
}], {
vldOnBlur: true,
errorField: "#errField",
errorClass: "error",
tipDir: "right",
tipOffset: {
left: 5,
},
timer: false,
parent: $(".outer").first(),
autoRevise: true
//listenScroll:false,
});
Validator构造函数接受两个参数,第一个为数组,表示需要验证的规则集合,第二个为object类型的options,表示全局的设置.
每一个数组元素为如下格式的object:
{
field: '', //需要验证的input的标签的id
rule: [], //验证规则,数组格式,每个元素为string类型的验证规则,格式为:规则名[参数]
msg: '', //验证失败后的错误提示信息
tipDir:'', //Error Tip的位置,up,down,left,right之一
tipOffset: {
left: '', //Error Tip距离原始位置的左偏移量
top: '' //Error Tip距离原始位置的上偏移量
},
limiter: {
//limiter.js设置
},
dynamicVld: boolean //是否进行动态验证
}
{
version: "1.0.2", //版本号
vldOnBlur: false, //元素失去焦点时验证
checkOnError: true, //当前input内的数据不合法时自动验证数据
focus1stErr:true,//发生错误时第一个错误input获取焦点
timer: true, //是否使用定时器验证,若否,使用keydown和onpaste代替
errorFiled: null, //集中显示错误信息的区域。
errorClass: "", //错误时input标签应用的css样式
errorLocClass: "", //错误时错误提示标签应用的样式,如show
errTipTpl: "<div class='errorTip' style='z-index:10;"
+ "position:absolute;'>{{message}}</div>", //错误Tip模板,absolute定位
tipDir: "right", //错误tip的显示位置,可选up,down left,right,关闭tip的话设置为false
tipOffset: null, //错误tip显示位置的偏移量,需要包含left和top
defaultMsg: "输入有误,请重新输入", //默认的错误提示信息
parent: "body", //父节点$selector,为空的话自动指定为body
autoRevise: false /* 动态验证时使用修正后的值替换错误值,若为false,
则使用上一次保存的值替换错误值。
注:上一次保存的值不一定是正确值
*/
}
其中,limiter的设置方式为:
limiter: {
wrapper: "", /**
* 字数统计的容器元素
* @type NodeList
* @default ""
*/
target: "", /**
* 目标元素,比如文本框
* @type NodeList
* @default ""
*/
el: "", /**
* 元素
* @type NodeList
* @default ""
*/
tpl: "", /**
* 字数统计使用的模板(未超出字数和超出字数的情况是不一样的)
* @type String
* @default ""
*/
defaultTpl: '<span class="ks-letter-count"><em class="J_LetterRemain">{remain}</em>字节</span>',
/**
* 字数统计默认模板
* @type String
* @default "<span class="ks-letter-count">您还可以输入<em class="J_LetterRemain">{remain}</em>个字</span>"
*/
exceedTpl: '<span class="ks-letter-count-exceed">超出<em class="J_LetterRemain exceed-letter">{remain}</em>字节</span>',
/**
* 超出字数后的模板
* @type String
* @default "<span class="ks-letter-count">已经超出<em class="J_LetterRemain exceed-letter">{remain}</em>个字</span>"
*/
max: 50, /**
* 最大允许输入的字数,超出的临界点
* @type Number
* @default 50
*/
len: 0, /**
* 字数,只读属性
* @type Number
* @default 0
*/
isRejectTag: false, /**
* 算字数时是否排除html标签(富编辑器一般需要把html标签所占的字数去掉)
* @type Boolean
* @default false
*/
isEnToCn: false, /**
* 将英文算成半个汉字
* @type Boolean
* @default false
*/
isCut: false /**
* 超过最大字数时予以截断
* @type Boolean
* @default false
*/
};
通过调用vld.isPassed()
确认验证是否通过.
通过调用vld.results()
获取详细的验证结果.
通过调用vld.revise()
手动进行一次数据修正.
除了设定的事件被触发时会进行验证,也可通过代码调用验证功能:vld.validateAll()
或vld.validateOne(index)
.
####window.ValidatorDefaults(opts) @param opts string 设置参数
设置Validator的全局参数
####window.Validator(validations,opts) 如之前描述
####Validator.results() @return [] 获取验证结果的详细描述
####Validator.isPassed() @return boolean 是否全部验证都通过
####Validator.validateAll() @return boolean 是否全部验证都通过
手动进行全部验证
####Validator.revise() @return boolean 修正后的值是否全部通过验证
手动修正全部数据,之后进行一次全部验证
####Validator.validateOne(index) @param index integer 需要验证的规则下标
手动验证指定index的validation
##单个input验证 $obj.validator(validation)