前端js校验 自己编的校验工具

心血来潮,想自己做个校验工具,只限于对form表单的校验,没有花多长时间就做完了,现在只有一个简单的框架,我想,用这个做校验应该没啥问题了,剩下的一部分代码靠后期有时间了再写

源码

// 1 校验规则
var maet={
//不为空
notNull     :function(inpu){
if($(inpu).val()!=null&&$(inpu).val()!=""){
return true
}else{
return false;
}

},
//必须数字
onlyNum     :function(inpu){},
//必须英文
onlyEnglish :function(inpu){},
//没有特殊字符
noSpecial   :function(inpu){
var au=/^\w+$/g;
var be=$(inpu).val().replace(au,"");
if(be==""||be==null){
return true;
}else{
return false;
}
},
//密码
password    :function(inpu){return true;},
//最长
maxLength   :function(inpu){return true;},
//最短
minLength   :function(inpu){return true;},
//固定长度
length      :function(inpu){return true;},
//必须选择
mustChoose  :function(inpu){return true;}
};
// 2 表单存储     obj,[校验规则名称],错误提示
var A_form=[];
// 自定义规则
var roleSelf=[];
//数据筛选
function dateFiler(_form){
var se= _form.find("input");
var fenge=function(role){
return  role.split(",");
}
var add = function(inputa,role,errorMessage){
var obj= {obj:inputa,role:role,errorMessage:errorMessage}
A_form.push(obj);
}
$(se).each(function(i,n){
var b=$(n).attr("mycheck");
if(b!= null&b!= ""){
err=$(n).attr("errorMessage");
add(n,fenge(b),err);
}
});

}
var errorList ={
//错误列队
errorInput:[],

//错误显示样式
errorCss:"",
//显示所有Err
liveErr:function(){
$(errorList.errorInput).each(function(n,o){
$(o.obj).change(function(){
errorList.onChange(o);
});
$(o.obj).after("<p style='"+errorList.errorCss+"'>"+o.errorMessage+"</p>");
});
},
//删除Err
deleteErr:function(objs){
var i =errorList.errorInput.indexOf(objs);
errorList.errorInput.splice(i,i);
$(objs.obj).next("p").remove();
},
//当数据改变
onChange:function(objs){
if(center.jiaoyanOne(objs)){
errorList.deleteErr(objs);
}
},
//添加err到列
addErrInput:function(objs){

4000
errorList.errorInput.push(objs);
},
//删除所有错误
cleanAll:function(){
$(errorList.errorInput).each(function(i,n){
errorList.deleteErr(n);
});
errorList.errorInput=[];
}
};
//表单验证控制器
var center={
//遇到错误是否继续
goOn: true,
//初始化
init :function(formName){
this.formName=formName;
errorList.cleanAll();
A_form=[];
roleSelf=[];
if(this.formName==""){
//请设置表单名称
}
var form =$("#"+this.formName);
//数据过滤
dateFiler(form);
//
},
//执行校验规则
jiaoyan :function(){
$(A_form).each(function(i,n){
$(n.role).each(function(j,t){
if(maet[t](n.obj)){
console.log("通过该测试1");
}else{
if(center.goOn){
console.log("无法通过" +t);
errorList.addErrInput(n);
return ;
}
}
});
});
errorList.liveErr();
if(errorList.errorInput.length<1){
return true;
}else{
return false;
}
},
jiaoyanOne:function(obj){
var bse= true;
$(obj.role).each(function(j,t){
if(maet[t](obj.obj)){
//单项通过测试
}else{
//单项无通过测试
bse=false;
return;
}
});
return bse;
},
formName : "",
addRule:function(names,obj){
maet[names]=obj;
},

};

现在的代码只为方便开发,并没有过深的处理

center 控制中心

errorList 错误处理

dateFiler 筛选出表单中带有标志的input框,存入A_form

A_form 表单中筛选出来的input

maet 校验规则

思路

当使用 center.init(“这里是表单id”); 初始化一个表单,会筛选出所有具有mycheck属性的input框,mycheck属性的值是需要校验的规则,多个规则用’,’分开如:

mycheck=”notNull,noSpecial”

可以自定义校验规则,用center.addRule(“myselfTest”, myselfTest)将规则添加到校验规则中,自定义规则写法

var myselfTest = function (objs){
return false;
}

其中的objs是A_form 中的一个对象校验完毕返回一个布尔值即可.

使用center.jiaoyan();进行校验,校验完毕会返回校验结果,结果为布尔值.

校验过程中会把错误存储在errorList 中,errorList 中的liveErr()方法会展示错误,怎么展示错误是这里用的很潦草,就不解释了.

center.init方法会清楚所有错误

后续完善方向:

1 优化校验规则,完善代码

2 将这个个校验写成工厂模式,返回一个校验对象,免得一个center=[],直接毁了程序

3 添加一个验证码校验和ajax后台校验功能