客户端表单验证js

      写了个前台表单验证的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;
        }
    }  
}

使用方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link href="StyleAdmin.css" rel="stylesheet" type="text/css" />

    <script src="../js/IT.Framework.validator.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>
            添加管理员用户</h1>
        <table id="InfoShow" cellspacing="0" rules="all" border="0">
            <tr>
                <th colspan="2">
                    添加用户
                </th>
            </tr>
            <tr>
                <td align="right" width="160">
                    教工号:
                </td>
                <td>
                    <input name="adminNum" type="text" class="textInput" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    管理员姓名:
                </td>
                <td>
                    <input name="adminName" type="text" class="textInput" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    管理员密码:
                </td>
                <td>
                    <input name="password" id="passwod" type="password" class="textInput" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    重复密码:
                </td>
                <td>
                    <input name="rePassword" type="password" class="textInput" />
                </td>
            </tr>
              <tr>
                <td align="right">
                    所属单位:
                </td>
                <td>
                    <input name="college" type="text" class="textInput" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    备注:
                </td>
                <td>
                    <input name="remark" type="text" class="textInput" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    电话号码:
                </td>
                <td>
                    <input name="phone" type="text" class="textInput" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    电子信箱:
                </td>
                <td>
                    <input name="email" type="text" class="textInput" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input name="submit" id="submit" type="submit" value="添加" class="btnSubmit" />
                    <input name="reset" type="reset" value="取消" class="btnSubmit" />
                </td>
            </tr>
        </table>

    </div>

    <script language="javascript" type="text/javascript">
    validator.registorAll([["adminNum",inputType.number],["adminName",inputType.notEmpty],["password",inputType.password],["rePassword",inputType.rePassword],
    ["submit",inputType.submit],["remark",inputType.notEmpty],["email",inputType.canEmptyIsEmail],["phone",inputType.phone],["college",inputType.notEmpty]]);
    </script>

    </form>
</body>
</html>

validator的registorAll方法接受一个二维数组，该数组元素为[控件id，控件类型]的一维数组，注册完成后当注册控件的onblur时间触发时检查输入，并显示提示信息。
如果为表单，并且注册了submit控件，哪么在表单输入有错误的情况下submit为disabled，否则允许提交。

 

原创文章，转载请注明出处！
All CopyRight Reserved ！

 

主页：http://jingtao.cnblogs.com

QQ:307073463
Email:jingtaodeemail@qq.com
MSN:sunjingtao@live.com