写了个前台表单验证的js，拿来分享一下。
      实现的功能：对于注册到验证器中的控件，按照注册类型进行检验，如果输入符

合规则哪么在该控件右侧提示输入正确的信息，否则提示错误信息。Date类型只

是验证形式，有待改进。

【原创】转载请注明出处！


//输入框类型
var inputType={
    email:"email",
    date:"date",
    number:"number",
    phone:"phone",
    password:"password",
    rePassword:"rePassword",
    submit:"submit",
    notEmpty:"notEmpty",
    canEmptyIsEmail:"emptyEmail",
    canEmptyIsPhone:"emptyPhone"
}

var validator=new validatorObj();

function validatorObj(){

    this.inputs=new Array();
    //显示信息span的id后缀：对应空间id+show
    this.suffix="show";
    this.password={};
    this.rePassword={};
    this.submit={};
 
    //输入框对应的正则表达式       
    this.getRegex=function(type){
       var reg=null;
       switch(type)
        {
            case inputType.email:
                reg=/^(\w|\d)+@(\w|\d)+(\.(\w|\d)+)+$/;break;
            case inputType.date:
                reg=/^\d{4}-\d{1,2}-\d{1,2}$/;break;
            case inputType.number:
                reg=/^\d+$/;break;
            case inputType.phone:
                reg=/^(\d{8}|(\d{3,4}-\d{8})|\d{11})$/;break;
            case inputType.password:
                reg=/.+/;break;
            case inputType.notEmpty:
                reg=/.+/;break;
            case inputType.canEmptyIsEmail:
                reg=/^(\s?|((\w|\d)+@(\w|\d)+(\.(\w|\d)+)+))$/;break;
            case inputType.canEmptyIsPhone:
                reg=/^(\s?|((\d{8}|(\d{3,4}-\d{8})|\d{11}){1}))$/;break;
        }
        return reg;
    }
    //输入不符合规则显示的错误信息
    this.getErrorMessage=function(type){
        var em="";
        switch(type)
        {
            case inputType.email:
                em="Email格式不正确！如：xxx@xx.xx";break;
            case inputType.date:
                em="日期格式不正确！如：2008-08-08";break;
            case inputType.number:
                em="必须为数字！";break;
            case inputType.phone:
                em="电话号码格式不正确！";break;
            case inputType.rePassword:
                em="两次输入的密码不一致！请重新输入！";break;
            default:
                em="输入数据不符合要求！";break;
        }
        return "<font color=\"red\">"+em+"</font>";
    }
    //输入框获得焦点的提示信息
    this.getSuggestMessage=function(type){
        var rm="";
        switch(type)
        {
            case inputType.email:
                rm="请输入正确的Email格式！如：xxx@xx.xx";break;
            case inputType.date:
                rm="请输入合法日期！";break;
            case inputType.number:
                rm="请输入内容必须为数字！";break;
            case inputType.phone:
                rm="请输入合法的电话！";break;
            case inputType.password:
                rm="请输入密码！";break;
            case inputType.rePassword:
                rm="请确认密码！";break;
            default:
                rm="请输入合法数据！";break;
        }
        return "<font color=\"#666666\">"+rm+"</font>";
    }
    
    //输入正确提示信息
    this.getRightMessage=function(type){
            return "<font color=\"green\">输入信息格式正确！</font>";
    }
    //添加文本框对应的提示信息节点
    this.setShowLabel=function(id){
            var label=document.createElement("<span>");
            label.setAttribute("id",id+this.suffix);
            document.getElementById(id).parentNode.appendChild(label);
            return label;
    }
    //设置提交按钮的状态
    this.setSubmit=function(){
            var disabled=true;
            var type="";
            for(ele in this.inputs)
            {
                if(this.inputs[ele].type==inputType.rePassword)
                {
                    disabled=(validator.rePassword.value==validator.password.value)&&disabled;
                }
                else
                {
                    if(this.inputs[ele].type!=inputType.submit)
                    {
                        disabled=validator.getRegex(this.inputs[ele].type).test(document.getElementById(this.inputs[ele]["id"]).value)&&disabled;
                    }
                }
                if(!disabled)break;
            }
            this.submit.disabled=!disabled;
    }
    //设置文本框获得焦点响应事件
    this.setFocusFunc=function(id,type,label){
        document.getElementById(id).onfocus=function(){label.innerHTML=validator.getSuggestMessage(type);}
    }
    //设置文本框失去焦点的响应事件
    this.setBlurFunc=function(id,type,label){
        //重复密码文本框onfocus方法
        if(type==inputType.rePassword){
        document.getElementById(id).onblur=function(){
                var ele=validator.password;
                if(ele.value==null||ele.value=="")
                {
                    label.innerHTML="<font color='red'>在此处确认密码！</font>";
                }
                else
                {
                    if(ele.value!=document.getElementById(id).value)
                    {
                        label.innerHTML="<font color='red'>两次输入的密码不一致，请重新输入！</font>";
                    }
                    else
                    {
                        label.innerHTML=validator.getRightMessage(type);
                    }
                }
                validator.setSubmit();
            }
            return;
        }        
        //普通文本框onfocus方法
        document.getElementById(id).onblur=function(){
            if(validator.getRegex(type).test(document.getElementById(id).value))
            {
                  label.innerHTML=validator.getRightMessage(type);
            }
            else
            {
                if(this.value==""||this.value==null)
                {
                    label.innerHTML="<font color='red'>输入内容不能为空！</font>";
                }
                else
                {
                    label.innerHTML=validator.getErrorMessage(type);
                }
            }
            if(type==inputType.password)
            {
                validator.rePassword.onblur();
            }
           validator.setSubmit();
        }
    }
    //对单个文本框注册
    this.registor=function(id,type){
        var element=document.getElementById(id);
        if(!this.inputs[id])
        {
            this.inputs[id]=new Array();
            this.inputs[id]["id"]=id;
            this.inputs[id]["type"]=type;
            
            if(type==inputType.password)this.password=element;
            if(type==inputType.rePassword)this.rePassword=element;
            if(type==inputType.submit)
            {
                this.submit=element;
            }
            
            var label=this.setShowLabel(id);
            this.setFocusFunc(id,type,label);
            this.setBlurFunc(id,type,label);
        }
    }
    //对文本框数组注册
    this.registorAll=function(arr){
        for(var i=0;i<arr.length;i++)
        {
            this.registor(arr[i][0],arr[i][1]);
        }
        validator.setSubmit();
    }
    //移除对文本框注册
    this.remove=function(id){
        if(this.inputs[id])
        {
            this.inputs[id]=null;
        }
    }  
}