表单验证——>小案例

说明：
一个简单的登录提交验证，只有完全符合要求的，验证才通过，否则阻止提交
代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        table{width:700px}
        /*父元素下的第1个，第n个，最后一个td子元素*/
        td:first-child{width:60px}
        /*IE不支持nth-child*/
        td:nth-child(2){width:200px}
        /*IE*/
        td:first-child+td{width:200px}
        /*IE不支持--可以靠总宽度来调节
        td:last-child{width:340px}*/
        td span{color:red}

        .vali_Info{/* 页面初始，验证消息不显示 */
            display:none;
        }
        .txt_focus{/*只要文本框获得焦点时，给文本框穿*/
            border-top:2px solid black;
            border-left:2px solid black;
        }

        .vali_success,.vali_fail{
            background-repeat:no-repeat;
            background-position:left center;
            display:block;
        }
        /* 验证消息：验证通过时div的样式 */
        .vali_success{
            background-image:url("img/ok.png");
            padding-left:20px;
            width:0px;height:20px;
            overflow:hidden;
        }
        /* 验证消息：验证失败时div的样式 */
        .vali_fail{
            background-image:url("img/warning.png");
            border:1px solid red;
            background-color:#ddd;
            color:Red;
            padding-left:30px;
        }
    </style>
</head>
<body>
    <form action="" method="post">
       <h2>增加管理员</h2>
        <table>
            <tr>
                <td>姓名：</td>
                <td>
                    <input id="username" type="text" name="username" />
                    <span>*</span>
                </td>
                <td>
                    <div class="vali_Info">
                        10个字符以内的字母、数字和下划线的组合
                    </div>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input id="pwd" type="password" name="pwd"/>
                    <span>*</span>
                </td>
                <td>
                    <div class="vali_Info">6位数字</div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2">
                    <input  type="submit" value="保存"/>
                    <input type="reset" value="重填"/>
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    window.$ = HTMLElement.prototype.$ = function(selector){
        return (this==window?document:this).querySelectorAll(selector);
    }
    var form = document.forms[0];//获得表单
    var textName = form.elements[0];//获得表单下name对应的input值
    var textPwd = form.elements[1];
    textName.onfocus = textPwd.onfocus = function(){
        this.className = "txt_focus";
        this.parentNode.parentNode.$("div")[0].style.display = "block";
    }
    textName.onblur = validName;
    function validName(){
        this.className = "";
        var div = this.parentNode.parentNode.$("div")[0];
        var r = /^\w{1,10}$/.test(this.value);
        div.className = r?"vali_success":"vali_fail";
        return r;
    }
    textPwd.onblur = validPwd;
    function validPwd(){
        this.className = "";
        var div = this.parentNode.parentNode.$("div")[0];
        var r = /^\d{6}$/.test(this.value);
        div.className = r?"vali_success":"vali_fail";
        return r;
    }
    form.onsubmit = function () {
        var r = true;
        r = textName.onblur() && textPwd.onblur();
        if (!r){
            var e = window.event||arguments[0];//获得事件
            if (e.preventDefault){
                e.preventDefault();//DOM
            }else {
                e.returnValue = false;//IE8
            }
        }
    }
</script>
</html>
表单验证——>小案例

猜你喜欢
