请老师检查

<!DOCTYPE html>
<html lang="en">
<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 userinput=document.querySelectorAll('input');

        sign={
         0:false,
         1:false,
         2:false
        }
        

        var selectShow={
        0:'请输入6-18位数字, 字母, 下划线',
        1:'请输入中文名字',
        2:'请输入邮箱'
    }

    var verifyLogic={
        0:/^[\w\d_]{6,18}$/,
        1:/^[\u4e00-\u9fa5]{2,4}$/,
        2:/^[\w\d_!#\$%\^&\*\(\)\[\]]+@(?:\w){2,4}\.com$/
    }

    function verify(logic,str){
        console.log('结果为'+logic.exec(str))
            return logic.test(str);
        }
   

        each(sign,userinput,spans,verifyLogic,selectShow,function(input,spans,verifyLogic,selectShow,index){
            
            input.onfocus=function(){
                spans.innerText=selectShow;
            }
            input.onblur=function(){
                if(input.value==''){
                    console.log(input.value)
                    spans.innerText='内容不能为空';
                }else{
                    spans.innerText='';
                    var result=verify(verifyLogic,input.value)
                    if(!result){
                        spans.innerText='格式不正确';
                    }else{
                        sign[index]=true;
                        if(sign[0]&&sign[1]&&sign[2]){
                            submit.onclick=function(){
                                alert('注册成功');
                            }
                        }
                    }
                }
            }
        })
        function each(sign,input,spans,verifyLogic,selectShow,fn){
            for(var i=0;i<spans.length;i++){
                fn(input[i],spans[i],verifyLogic[i],selectShow[i],i)
            }
        }
        
    
    </script>
</body>

</html>

慕少3568243 2020-05-31

源自：项目：JS表单验证案例 3-9 编程练习