很多网站都有登陆和注册功能,只要涉及到登陆和注册的几乎全部都要用到表单,而表单在提交前,需要对输入进行校验,验证输入长度,类型等等是否合法,目前常用的就是jQuery-validate.js这个插件。其实这些插件的实现眼里都是比较简单的,主要用到input标签的focus和blur事件,然后在这个事件触发的时候通过正则表达式对输入的值进行检验,然后返回校验结果。
现在我们就来实现一个简单的表单校验器
/**
* author:yangyangwang
* desc:表单验证插件
*/
(function(window,$){
var wv = function(){
}
wv.prototype={
valid:true,
version:"1.0.0",
name:"wv",
desc:"表单验证插件",
rules:{
"noEmpty":{
rules:function(value,title){
if(!value){
return title+"不能为空"
}
}
},
"Number":{
rules:function(value,title){
if(!value){
return title+"不能为空"
}else{
if(!/^[0-9]*$/.test(value)){
return title+"只能是数字"
}
}
}
}
},
addRules:function(option){
//检验option是否合法
if($.type(option)){
}else{
throw new Error("规则不合法!")
return;
}
this.rules=$.extend(this.rules, option);
},
init:function(option){
var defaultOption = {
color:"red",//提示字体颜色
border:"0px solid red",
left:"40%",
top:"2px"
};
var option = $.extend(defaultOption,option);
var self = this;
$("input[validate]").on("focus",function(e){
var ev = e||event;
var target = ev.target;
$(target).siblings(".tip").remove();//当输入框激活时移除提示文字
$(target).css({//当输入框激活时如果之前处于错误提示样式则恢复到激活样式
border:'1px solid cornflowerblue',
boxShadow:'0px 0px 5px cornflowerblue'
})
});
$("input[validate]").on("blur",function(e){//输入框失去焦点的时候进行输入验证
var ev = e||event;
var target = ev.target;
var ruleStr = $(target).attr("validate");
var rulesArr = ruleStr.split(" ");
for(var i = 0;i<rulesArr.length;i++){
var msg = self.validMethod(rulesArr[i],target);
if(msg){
var tip = document.createElement("span");
tip.className = "tip";
tip.innerText = msg;
$(target).after($(tip));
$(tip).css({
position:"relative",
dispaly:"inline-block",
minWidth:"80px",
padding:"3px",
height:"25px",
lineHeight:'center',
background:'rgba(0,0,0,0)',
color:option.color,
border:option.border,
borderRadius:"3px",
fontWeight:"600",
fonSize:"13px",
left:option.left,
top:option.top
});
target.style.border="1px solid #ed8464";
target.style.boxShadow="0px 0px 5px #dc3b33";
this.valid = false;
break;
}
else{
target.style.border="1px solid #558630";
target.style.boxShadow="0px 0px 0px";
}
}
})
},
validMethod:function(rule,obj){
var msg = "";
var title = $(obj).attr("title")||"该输入项";
var value = $(obj).val();
if(this.rules[rule]){
try{
msg = this.rules[rule].rules(value,title);
}catch(e){
throw new Error("校验规则不合法")
}
}
return msg;
}
}
wv.prototype.init.prototype = wv.prototype;//这句的目的是为了让init中的this和mv.prototype中的this是同一个对象。参考jquery中的实现;
window.wv = wv;
})(window,$)
插件是基于jquery的,所有在用这个插件前要保证jquery已经加载
下面是效果图
noEmpty:
Number:
Success:
这里只内置了noEmpty和Number两种校验,如果需要其他校验可以通过addRules方法添加检验规则