完美的JS验证类

这几天一直都在想着用JavaScript来模拟一下Asp.Net中的验证控件。其实在IE中效果早已经实现了，不过在Firefox中老出现毛病。问题救出在绑定form的submit事件里边，即类似于以下的形式：

 

form.addEventListener("submit",function(){if(...)return false;else return true;},false);

 

无论function()提交的值是true还是false，在Firefox中都会导致form的提交。而在IE中这一切都是正常运作的。

 

这让我很郁闷，试了两天，一点成果都没有，昨天上网查也没有什么结果。还好，今天一上网搜索就有了结果，原来，在firefox里边只能用下面的样子来做form的提交。

form.onsubmit=function(){

...

}

一试之下，果然如此，于是，后面的代码就一气呵成了。

//验证控件
var Validator=function(formid){
    var base=this;
    var form=$(formid);
    var validArr=new Array();
    var validObjTag="_v";
    
    //绑定验证控件的Class属性
    var spans=document.getElementsByTagName("span");
    for(var i=0;i<spans.length;i++){
        if(spans[i].id.indexOf(validObjTag)!=-1)
            spans[i].className="validator";
    }
    
    //绑定提交事件
    form.onsubmit=function(){
       return base.valid();
    }
    
    //验证控件对应的ID
    function validObjID(id){
        return validObjTag + id;
    }
    
    //绑定验证事件
    this.bind=function(id,eventArr){
        if(!$(validObjID(id)))
            alert("验证控件（id=" + validObjID(id) + "）不存在！");
        var count;
        
        validArr.push(new Array(id,eventArr));
        
        if(isIE){
            $(id).attachEvent("onblur",function(){
                for(var i=0;i<eventArr.length;i++){
                    if(!validObjID("id").innerHTML)base.doValid(id,eventArr[i][0],eventArr[i][1]);
                }
            });
        }else{
            $(id).addEventListener("blur",function(){
                for(var i=0;i<eventArr.length;i++){
                    if(!validObjID("id").innerHTML)base.doValid(id,eventArr[i][0],eventArr[i][1]);
                }
            },false);
        }
    }
    
    //所有对象的验证事件
    this.valid=function(){
        var pass=true;
        for(var i=0;i<validArr.length;i++){
            for(var j=0;j<validArr[i][1].length;j++){
                if(!base.doValid(validArr[i][0],validArr[i][1][j][0],validArr[i][1][j][1]))pass=false;
            }
        }
        return pass;
    }
    
    //一个对象的验证事件
    this.doValid=function(id,type,msg){
        switch(type){
            case "empty":
                return writeMsg(id,msg,($(id).value==""));
                //break;
            
        }
    }
    
    //写出错误信息
    function writeMsg(id,msg,result){
        if(result){
            $(validObjID(id)).innerHTML=msg;
            return false;
        }else{
            $(validObjID(id)).innerHTML="";
            return true;
        }
    }
}

怎么个用法呢？非常简单。

首先是建立一个Validator的实例
var vld=Validator("formName");  //formName是表单的名称
然后就可以绑定要验证的对象了，比如表单有个id=txtName的input，不能让它为空，就可以这样写：
vld.bind("txtName",[["empty","错误信息"]]);
[["empty","错误信息"]]是一个数组，如果有多种要验证的方式，就在此添加。如[["empty","errormsg1"],["email","errormsg2"]]，其中empty和email是定义的验证类别，errormsgx是显示的错误信息。
不过这样做还没有完毕，需要手动地写入错误信息现实的容器。这个容器需要使用span的标记，而且id必须和要验证的控件的id保持定义好的格式，在这里我定义的格式是这样的：_v + 控件ID，如果不是定义成这样的话，js会提示相应的错误。另外，所有的验证信息现实容器都会定义成统一的类validator，所以最好在css样式表里边定义好这个类。

下面看看一个具体的效果：

当鼠标从某个绑定了验证事件的控件中离开时，会导致验证事件的发生。当点击提交时也会再验证一次。