老师帮忙检查下

来源：3-9 编程练习
技术为王2383098363
2019-08-17 17:51:39
<!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;
        }
        span{
            font-size: 13px;
        } 

    </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.onfocus=function(){
            spans[0].innerHTML='请输入6-18位字母、数字、下划线';
        };
        username.onblur=function(){
            var pattern=/^\w{6,18}$/;
            if (username.value=="") {
                spans[0].innerHTML='输入的内容不能为空';
                input1=false;
            }else{
                if (!pattern.test(username.value)) {
                    spans[0].innerHTML='格式不正确';
                    input1=false;
                }else{
                    spans[0].innerHTML='';
                    input1=true;
                }
            }
        }

        chinaName.onfocus=function(){
            spans[1].innerHTML='请输入中文名字';
        };
        chinaName.onblur=function(){
            var pattern=/^[\u4e00-\u9fa5]{2,5}$/;
            if (chinaName.value=="") {
                spans[1].innerHTML='输入的内容不能为空';
                input1=false;
            }else{
                if (!pattern.test(chinaName.value)) {
                    spans[1].innerHTML='格式不正确';
                    input1=false;
                }else{
                    spans[1].innerHTML='';
                    input2=true;
                }
            }
        }       

        email.onfocus=function(){
            spans[2].innerHTML='请输入邮箱';
        };
        email.onblur=function(){
            var pattern=/(?:\w+\.)*\w+@(?:\w+\.)+[a-z]/i;
            if (email.value=="") {
                spans[2].innerHTML='输入的内容不能为空';
                input1=false;
            }else{
                if (!pattern.test(email.value)) {
                    spans[2].innerHTML='格式不正确';
                    input1=false;
                }else{
                    spans[2].innerHTML='';
                    input3=true;
                }
            }
        }      

        submit.onclick=function(){
            if (input1==false || input2==false || input3==false ) {
                alert("请按照要求完整填写信息");
                return;
            }else{
                alert("注册成功");
            }
        }

    </script>
</body>

</html>
写回答
1回答