老师，麻烦看一下，最后那个提交验证感觉只是简单遍历，没有重新验证，还有给份参考答案瞧瞧

来源：4-8 编程练习

前端SoEasy

2019-05-19 23:43:01

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>12306账号注册</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #eee;
        }
        header{
            width: 100%;
            background-color: #3092d1;
        }
        .header{
            width: 800px;
            height: 35px;
            color: #fff;
            line-height: 35px;
            font-size: 18px;
            margin: 0 auto;
        }
        /* .register{
            width: 800px;
            height: 60px;
            color: #fff;
            margin: 0 auto;
        } */
        .wrap{
            width: 600px;
            margin: 0 auto;
        }
        .wrap>div{
            margin-top: 25px;
            height: 29px;
            color: #666;
            font-size: 16px;
        }
        .wrap>div::after{
            display: block;
            content: "";
            clear: both;
        }
        .I_heading{
            float: left;
            width: 100px;
            line-height: 29px;
            text-align: right;
            padding-right: 15px;
        }
        .wrap>div input,.select{
            float: left;
            width: 200px;
            height: 25px;
        }
        /* .select{
            margin-left: 5px;
        } */
        #submit{
            margin-top: 20px;
            width: 65px;
            height: 35px;
            background-color: #3276E4;
            border-radius: 5px;
            margin-left:180px;
            color:#fff;
            border: 0;
            outline: 0;
        }
        .inputTips{

            margin-left: 5px;
            font-size: 14px;
            line-height: 29px;
            color: red;
        }
    </style>
</head>

<body>
    <header>
        <div class="header"><span>用户注册</span></div>
    </header>
    <section class="register">
        <form class="wrap" method="get" autocomplete="autocomplete">
            <div class="userName">
                <span class="I_heading">用户名：</span>
                <input id="confUserName" class="input" type="text">
                <span class="inputTips"></span>
            </div>
            <div class="password">
                <span class="I_heading">密码：</span>
                <input id="confPwd" class="input" type="text">
                <span class="inputTips"></span>
            </div>
            <div class="confirm_pwd">
                <span class="I_heading">确认密码：</span>
                <input id="confPwdAgain" type="password">
                <span class="inputTips"></span>
            </div>
            <div class="name">
                <span class="I_heading">姓名：</span>
                <input id="confName" class="input" type="text">
                <span class="inputTips"></span>
            </div>
            <div class="sex">
                <span class="I_heading">性别：</span>
                <select id="select" class="select" name="">
                    <option value="man" selected="selected">男</option>
                    <option value="woman">女</option>
                </select>
            </div>
            <div class="idcard">
                <span class="I_heading">身份证号码：</span>
                <input id="conIdCard" class="input" type="tel">
                <span class="inputTips"></span>
            </div>
            <div class="email">
                <span class="I_heading">邮箱：</span>
                <input id="confEmail" class="input" type="email">
                <span class="inputTips"></span>
            </div>
            <div class="phone_num">
                <span class="I_heading">手机号码：</span>
                <input id="confTel" class="input" type="tel">
                <span class="inputTips"></span>
            </div>
            <input id="submit" type="button" value="提交">
        </form>
    </section>
    <script>
    var wrap = document.getElementsByClassName('wrap')[0],
        input = document.getElementsByClassName("input"),
        inputTips = document.getElementsByClassName("inputTips"),
        confPwdAgain = document.getElementById("confPwdAgain"),
        confPwd = document.getElementById("confPwd"),
        submit = document.getElementById("submit");
    var allTips = {
        confUserName: "6-20位字母、数字或_,字母开头",
        confPwd: "6-18位字母、数字或@#$*,中间不能有空格",
        confName: "真实姓名为两位到四位的中文",
        conIdCard: "请输入18位的身份证号码",
        confEmail: "邮箱格式不正确",
        confTel: "手机号码不正确",
        confPwdAgain: "请输入正确密码"
    }
    var confRegExp = {
        confUserName: /^[a-zA-Z]\w{5,20}$/,
        confPwd: /^[\w@#$*]{6,18}$/,
        confName: /^[\u4e00-\u9fa5]{2,4}$/,
        conIdCard: /^[1-9][\d]{16}[\dXx]{1}$/,
        confEmail: /^[\w]+@[a-zA-Z]{1,9}\.[a-zA-Z]{2,4}$/,
        confTel: /^[1-9]{1}[2-9]{1}\d{9}$/,
        confPwdAgain: new RegExp("^", confPwd.value, "$")
    }
    for (var i = 0; i < input.length; i++) {
        input[i].onblur =onBlur;
    }
    function onBlur() {
        confRegExp[this.id].test(this.value) ? this.nextElementSibling.innerHTML = "ok" : this.nextElementSibling.innerHTML = allTips[this.id];
    }
    confPwdAgain.onblur = function onBlurAgain() {
        if (confPwdAgain.value != confPwd.value) {
            confPwdAgain.nextElementSibling.innerHTML = allTips.confPwdAgain;
        } else {
            confPwdAgain.nextElementSibling.innerHTML = "ok";
        }
    }
    submit.onclick = function() {
       for (var i = 0; i < input.length; i++) {
           if (!input[i].value) {
            input[i].nextElementSibling.innerHTML=allTips[input[i].id];
            //认证有问题只是简单的遍历输出而已
           }else if(confRegExp[input[i].id].test(input[i].value)){
                alert("提交成功");
           }
       }
    }
    </script>
</body>
</htmldiv