前端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){                            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后台校验功能