Javascript前台简单验证插件2

前面的easyFormValidateWithJquery.js是基于 Jquery的，是我在工作中的第一个验证插件，使用起来比较灵活的。但是不足之处也显而易见，除了细节方面的诸多不足，最大的不足就是在于是干扰表单式的，所以一定要对表单的元素属性进行修改，这就在可重用性、维护性等方面造成了不便，这毕竟是把双刃剑，灵活的同时污染了表单。

其实在工作中很快我就写了第二个验证插件，这次是无干扰式的，而且是基于Dom的Javascript，不需要Jquery库支持。下面就附上代码。

//easyFormValidate2.0

//easyFormValidateWithDom.js

//本验证方法基本能满足简单的验证需求，如不能为空，必须是日期，必须是整数，最大值，最小值等

//本验证方法验证模式有2种：焦点离开文本域即验证和手动调用验证方法

//本验证方法失败信息显示方式有2种：alert提示信息+元素焦点;添加错误样式+元素焦点

//本验证方法是属于无干扰式的验证方法，只需要初始化验证信息即可。

//本验证方法最大缺点是由于是基于json的，并且使用了大量的对象for each语句，所以在大量元素验证的性能方面可能或有不如意的地方，

//但是完全可以胜任中小型的表单验证。
var SimpleValidate ={
    validates:{
        quick:{
        },
        normal:{}
    },
    elements:{
    },
    elmt:{
        id:"1",
        rule:[],
        messages:[]
    },
    init:function(objs){
        for(var obj in objs){
            this.addToValidates(objs[obj]);
        }
    },
    addToValidates:function(obj){
        if(!obj)return;
        var checkType = obj.checkType;
        if(checkType=='quick'){
            var eles = obj.eles;
            this.addToElements(eles);
            //if checkType is quick,add their focusout event;
            this.addOnFocusOutEvent(eles);
        }else if(checkType=='normal'){
            var eles = obj.eles;
            this.addToElements(eles);
            //if checkType is normal,just do nothing except add elements.And when invoking the validate method,
            //each elements in  this.elements will be validated.
        }
    },
    //initializaing the elements,add new elements to this.elements,give those elements their dom reference property;
    addToElements:function(eles){
        for(var id in eles){
            var info = eles[id];
            info.domEle = this.tools.getEle(id);
            info.id = info.id||id;
            this.elements[id]=info;
        }
    },
    addOnFocusOutEvent:function(eles){
        for(var f in eles){
            var nScope = this;
            nScope.elements[f].domEle.onfocusout=function(){
                var ret = nScope.validateDomEle(this);
            }
        }
    },
    initMessage:function(myEle,rule){
        var methodName = "";
        for(var method in rule){
            methodName = method.match(/\w+/)==null?method:method.match(/\w+/)[0];
            if(methodName==''||this.rules.methods[methodName.toLowerCase()]==null||rule[method]=='')
            continue;
            var messages = myEle.messages;
            if(!messages){
                messages = {};
                myEle.messages=messages;
            }
            messages[methodName]=rule[method];
        }
    },
    validateRule:function(elmt,rule,param){
        var    result = this.rules.methods[rule.toLowerCase()].call(this,elmt,param);
        if(!result){
            var retMsg;
            if(!this.elements[elmt.id]||!this.elements[elmt.id].messages)return this.messages[rule.toLowerCase()];
            return this.elements[elmt.id].messages[rule.toLowerCase()]||this.messages[rule.toLowerCase()];
        }
    },
    messages:{
        "fill":"该输入项不能为空",
        "date":"日期格式错误，必须为形如2001-01-01格式",
        "email":"邮箱格式错误，必须为形如[e-mail]格式",
        "integer":"该输入项必须是非负整数",
        "minlength":"最小长度没有符合要求",
        "maxlength":"最大长度没有符合要求",
        "rangelength":"长度范围没有符合要求",
        "doctype":"不是有效的word类型",
        "maxvalue":"最大值没有符合要求",
        "minvalue":"最小值没有符合要求"
    },
    rules:{
        methods:{
            "fill":function(elmt){
                return /\S/.test(elmt.value);
            },
            "date":function(elmt){
                return /\d{4}-\d{2}-\d{2}/.test(elmt.value);
            },
            "email":function(elmt){
                return /\w+@\w+\.\w+/.test(elmt.value);
            },
            "integer":function(elmt){
                return /^\d*$/.test(elmt.value);
            },
            "minlength":function(elmt,param){
                param = this.rules.parameters(param);
                return this.tools.getLength(elmt.value)>=param[0];
            },
            "maxlength":function(elmt,param){
                param = this.rules.parameters(param);
                return this.tools.getLength(elmt.value)<=param[0];
            },
            "rangelength":function(elmt,param){
                param = this.rules.parameters(param);
                return this.tools.getLength(elmt.value)>=param[0]&&this.tools.getLength(elmt.value)<=param[1];
            },
            "doctype":function(elmt){
                return /.+\.doc$/.test(elmt.value);
            },
            "maxvalue":function(elmt,param){
                param = this.rules.parameters(param);
                return elmt.value<=param[0];
            },
            "minvalue":function(elmt,param){
                return elmt.value>=param[0];
            },
            "regex":function(elmt,param){
                if(param.charAt(0)!='('||param.charAt(param.length-1)!=')')return false;
                param = param.substring(1,param.length-2);
                return new RegExp(param).test(elmt.value);
            }
        },
        parameters:    function(param){
            var re = /[\(]?\s*(\w*)\s*[\s,\)]/g;
            var arr="";
            var retArray=[];
            while ((arr = re.exec(param)) != null){
                   retArray.push(arr[1]);
               }
               return retArray;
        }
    },
    tools:{
        getLength:function(val){
        var len = 0;
        var ch;
        if(val==null)
            return len;
        for(var i = 0; i<val.length;i=i+1){
            ch=val.charCodeAt(i);
            if(ch>255)
                len+=2;
            else
                len=len+1;
        }
        return len;
        },
        convertToObj:function(rules,msgs){
            var ruleArr = rules.split(";");
            var msgArr = msgs.split(";");
            var r={};
            for(var i=0;i<ruleArr.length;i=i+1){
                r[ruleArr[i]]=msgArr[i]==null?"":msgArr[i];
            }
            return r;
        },
        convertArrayToObj:function(rules,msgs){
            var r={};
            for(var i=0;i<rules.length;i=i+1){
                r[rules[i]]=msgs[i]==null?"":msgs[i];
            }
            return r;
        },
        getFormByFormIndex:function(formIndex){
            var retForm = document.getElementById(formIndex)||document.all(formIndex);
            if(retForm&&retForm.length){
                retForm = retForm[0];
            }
            return retForm;
        },
        getEle:function(eleIndex){
            var retEle = document.getElementById(eleIndex)||document.all(eleIndex);
            if(retEle&&retEle.length){
                retEle =  retEle[0];
            }
            return retEle;
        },
        getObjPropertyNum:function(obj){
            var num =0;
            for(var p in obj)num=num+1;
            return num;
        }
    },
    validate:function(){
        var notError = true;
        var elemts = this.elements;
        for(var ele in elemts){
            var myEle = elemts[ele];
            var retMsg = this.validateMyEle(myEle);
            if(retMsg){
                this.addErrMsg(myEle,retMsg);
                myEle.domEle.focus();
                return false;
            }else this.removeErrMsg(myEle);
        }
        return notError;
    },
    validateDomEle:function(domEle){
        var myEle = this.elements[domEle.id||domEle.name];
        if(!myEle)return;
        var retMsg = this.validateMyEle(myEle);
        if(retMsg){
            this.addErrMsg(myEle,retMsg);
            return false;
        }else this.removeErrMsg(myEle);
    },
    addErrMsg:function(myEle,retMsg){
        var eTypes = myEle.errorType;
        var domEle = myEle.domEle;
        if(!eTypes)return;
        for(var i=0;i<eTypes.length;i=i+1){
            var etype = eTypes[i];
            if(etype=='alert'){
                alert(retMsg);
            }else if(etype=='page'){
                var cName = domEle.className;
                if(cName.indexOf("wrongClass")==-1){
                    domEle.className=domEle.className+" wrongClass";
                    domEle.title = retMsg;
                }
            }
        }
    },
    removeErrMsg:function(myEle){
        var eTypes = myEle.errorType;
        var domEle = myEle.domEle;
        if(!eTypes)return;
        for(var i=0;i<eTypes.length;i=i+1){
            var etype = eTypes[i];
            if(etype=='page'){
                var cName = domEle.className;
                if(cName.indexOf("wrongClass")!=-1){
                    domEle.className = cName.replace("wrongClass","");
                    domEle.title = "";
                }
            }
        }
    },
    validateMyEle:function(myEle){
        if(!myEle)return;
        var rule = myEle.rule;
        var msg = myEle.message;
        var domEle = myEle.domEle;
        if(!domEle)return;
        var rule = this.tools.convertArrayToObj(rule,msg);
        var methodName;
        var param;
        this.initMessage(myEle,rule);
        for(var method in rule){
            methodName = method.match(/\w+/)==null?method:method.match(/\w+/)[0];
            if(methodName==null||methodName==''||this.rules.methods[methodName.toLowerCase()]==null)
                continue;
            param = method.match(/\([\w,\s]*\)/)==null?"":method.match(/\([\w,\s]*\)/)[0];
            if(methodName=='regex'){
                param = method.substring(5);
            }
            var ret =this.validateRule(domEle,methodName,param);
            if(ret!=null&&ret!='undefined'){
                //formElement.focus();
                return ret;
            }
        }
    }
};



demo:

<html>
<head>
<script src="js/easyFormValidateWithDom.js" type="text/javascript"></script>
<script type="text/javascript">
function validate(){
    if(!SimpleValidate.validate())return;
}
function init(){
    SimpleValidate.init({
        "validateA":{
            checkType:"normal",//离开焦点即验证(quick);调用方法验证(normal)
            eles:{
                "inputC":{rule:["fill","integer"],message:["inputC不能为空"],errorType:["alert"]},
                "inputD":{rule:["fill","regex(/\w*?hello\w*?/g)"],message:["inputD不能为空","输入项必须含有hello"],errorType:["alert"]}
            }
        },
        "validateB":{
            checkType:"quick",//离开焦点即验证(quick);调用方法验证(normal)
            eles:{
                "inputA":{rule:["fill","maxlength(3 ,4)"],message:["inputA不能为空","inputA最大长度为3"],errorType:["alert","page"]}
            }
        }
    });
}
</script>
<style type='text/css'>
.wrongClass{ border: 1px dotted red; }
</style>
</head>
<body onload='init()'>
<form id='testForm'>
A:<input type=text value='need validate' id='inputA'><br>
B:<input type=text value='need not validate' id='inputB'><br>
C:<input type=text value='need validate' id='inputC'><br>
D:<input type=text value='custom regex validate' id='inputD'>
<input type=button value='Validate' onclick='validate()'>
</form>
</body>
</html>