心血来潮,想自己做个校验工具,只限于对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("
+errorList.errorCss+"'>"+o.errorMessage+"
");
                            });
                         },
                         //删除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后台校验功能