第一次写框架 可能代码性能并不好 ^_^
<div id="validate"></div>
<input type="text" validateGroup="1" validate="mail">
验证类型 | 说明 |
---|---|
notNull | 不能为空 |
null | 只能为空 |
邮箱 | |
phone | 手机号 |
idcard | 身份证 |
password | 密码 |
length | 长度 |
float | 浮点数 |
int | 整数 |
url | 链接 |
date | 日期 |
username | 用户名 |
例如:
<input type="text" validateGroup="1" validate="int|length(1,2)">
以上代码只匹配一位整数
考虑到在同一验证范围内可能会存在多组验证,例如
<div id="validate">
<div>
<input type="text" validateGroup="1"><br>
<input type="text" validateGroup="1"><br>
<button id="sub1">验证1</button>
</div>
<div>
<input type="text" validateGroup="1"><br>
<input type="text" validateGroup="1"><br>
<input type="text" validateGroup="2"><br>
<button id="sub2">验证2</button>
</div>
</div>
<div id="validate">
<input type="text" placeholder="不能为空" validateGroup="1" validate="notNull|length(1,5)"><br>
<input type="text" placeholder="只能为空" validateGroup="1" validate="null"><br>
<input type="text" placeholder="邮箱" validateGroup="1" validate="mail"><br>
<button id="sub1">验证1</button>
<br><br><br><br>
<input type="date" placeholder="不能为空" validateGroup="2" validate="notNull"><br>
<input type="text" placeholder="整数并且不为空" validateGroup="2" validate="notNull|int|phone"><br>
<input type="text" value="" validateGroup="2" validate="password|int"><br>
<input type="text" value="" validateGroup="2" validate="password|int"><br>
<button id="sub2">验证2</button>
</div>
则需要在js中配置如下代码
complexValidate.option({
group:[
{
validateRound:"#validate",
validateGroup:"1"
},
{
validateRound:"#validate",
validateGroup:"2"
}
]
});
validateRound为验证范围
validateGroup为验证组,同一验证组只需要声明配置一次即可
$(document).on("click","#sub1",function(){
var arr=window.complexValidate.validate("1",function (item,status) {
if(status){
item.css("background-color","#58eead")
}else{
item.css("background-color","#8f7cee")
}
});
});
$(document).on("click","#sub2",function(){
window.complexValidate.validate("2",function (item,status) {
if(status){
item.css("background-color","#58eead")
}else{
item.css("background-color","#ff777e")
}
});
});
当分别点击两个按钮时验证不同的组别 验证每一个input调用一次window.complexValidate.validate方法中的回调函数 回调函数包含当前的input及状态这两个参数 函数执行完毕返回当前验证组input对象及验证状态的数组
很明显,目前内置的验证函数根本无法满足很多复杂的验证 这个框架提供让用户自己设定验证函数的方式例如: 我们可以在配置对象complexValidate.option中添加regex这个对象
complexValidate.option({
group:[
{
validateRound:"#validate",
validateGroup:"1"
}
],
regex:{
xxx:{
type:'fun',
regex:function (curr,group,regex,k,j) {
var len=$(curr).val().length
return len>=k&&len<j
}
}
}
});
如上代码所示,在框架中添加了xxx这个验证类型,在如下代码中即可使用
<input type="text" validateGroup="1" validate="xxx(1,2)">
其中xxx的值为一个对象,验证对象的type属性的值目前只能为"fun"或"regex"
如果type为"regex"则,验证对象的regex属性只能为一个正则表达式
即
xxx:{
type:'regex',
regex:/\S/
}
如果type为"fun"则,验证对象的regex属性只能为一个匿名函数
即
xxx:{
type:'fun',
regex:function (curr,group,regex,k,j) {
var len=$(curr).val().length
return len>=k&&len<j
}
}
1)curr为当前验证对象
2)group不变,为当前验证范围中带有该验证类型的数组
3)multiRegex改为regex,现在只需要传一个需要验证的函数和验证类型字符串"int|notNull|length(1,5)"即可:
xxx:{
type:'fun',
regex:function (i,j,regex) {
return regex(i,"int|notNull|length(1,5)")
}
}
第四个参数及以后的参数由用户定义
如上述代码所示,定义了k,j参数,在 validate="xxx(1,2)"