老师帮忙查看下

来源：3-9 编程练习

恺撒911

2019-06-21 00:17:54

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        form{
            width:300px;
            background:pink;
            text-align: center;
            padding:30px 0;
            margin:100px auto;
        }

    </style>
</head>
<body>
    <form id="form">

        <p>
            <input type="text" name="name" id="username" placeholder="请输入账户名">
        </p>

        <span></span>

        <p>
            <input type="text" name="chinaName" id="chinaName" placeholder="请输入中文名">
        </p>

        <span></span>

        <p>
            <input type="email" name="eamil" id="email" placeholder="请输入邮箱">
        </p>
        <span></span>

        <p><input type="submit" value="注册" id="submit"></p>

    </form>

    <script type="text/javascript">

        var spans=document.getElementsByTagName("span");

        var username=document.getElementById("username");

       var chinaName=document.getElementById("chinaName");

       var email=document.getElementById("email");

       var submit=document.getElementById("submit");

       var input1=false;

       var input2=false;

       var input3=false;

        //username

        username.onblur = function(){

            var usernamePattern = /^\w{6,18}$/;

            if(this.value == ""){

                spans[0].innerHTML = "用户名称不能为空";

                spans[0].style.color = "red";

            }else{

                if(!usernamePattern.exec(username.value)){

                    spans[0].innerHTML = "请输入6--18位数字、字母、_";

                    spans[0].style.color = "red";

                }else{

                    spans[0].innerHTML = "OK";

                    spans[0].style.color = "green";

                    input1 = true;
                }
            }
        }

        //chinaName

        chinaName.onblur = function(){

            var chinaNamePattern = /^[\u4e00-\u9fa5]{2,4}$/;

            if(this.value == ""){

                spans[1].innerHTML = "姓名不能为空";

                spans[1].style.color = "red";

            }else{

                if(!chinaNamePattern.exec(chinaName.value)){

                    spans[1].innerHTML = "请输入两位到四位的中文";

                    spans[1].style.color = "red";

                }else{

                    spans[1].innerHTML = "OK";

                    spans[1].style.color = "green";

                    input2 = true;
                }
            }
        }

        //email


        email.onblur = function(){

            var emailPattern = /^\w+@\w+[\.\w]+$/;

            if(this.value == ""){

                spans[2].innerHTML = "邮箱不能为空";

                spans[2].style.color = "red";

            }else{

                if(!emailPattern.exec(email.value)){

                    spans[2].innerHTML = "邮箱格式不正确";

                    spans[2].style.color = "red";

                }else{

                    spans[2].innerHTML = "OK";

                    spans[2].style.color = "green";

                    input3 = true;
                }
            }
        }

        //submit

        submit.onclick = function(){

            if(input1 == false || input2 == false || input3 ==false){

                alert("您输入的信息有误");

            }else{

                alert("注册成功");
            }
        }
    </script>
</body>

</html>