老师帮忙看一下

来源：4-8 编程练习
慕运维2135045
2018-12-01 17:01:55
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
        background: #ccc;
        }
        .color{
            color: red;
        }
        .user{
            height: 50px;
            background:blue;
            font-size: 20px;
            line-height: 50px;
            color: white;
        }
        .wrap{
            width: 600px;
            margin:150px auto;
        }
        .wrap div{
            margin:6px;
        }
        .testname{
            display: inline-block;
            width: 100px;
            text-align: right;
            margin-right:20px;
        }
        select{
            width: 173px;
            height: 21px;
        }
        .wrap .goes{
            margin-top:100px;
            text-align: center;
        }
        .btn{
            width: 150px;
            height: 50px;
            background:blue;
            font-size: 26px;
            line-height: 50px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="user">用户注册</div>
    <div class="wrap">
        <div>
            <span class="testname">用户名:</span>
            <input type="text" title="^[a-zA-Z]\w{5,19}$" data-info="6-20位字母、数字或“_”,字母开头">
            <span class="color"></span>
        </div>
        <div>
            <span class="testname">登录密码:</span>
            <input type="text" title="^\S{6,18}$" data-info="密码格式输入错误">
            <span class="color"></span>
        </div><div>
            <span class="testname">确认密码:</span>
            <input type="text">
            <span class="color"></span>
        </div>
        
        <div>
            <span class="testname">姓名:</span>
            <input type="text" title="^[\u4e00-\u9fa5]{2,4}$" data-info="输入的姓名格式错误">
            <span class="color"></span>
        </div>
        <div>
            <span class="testname">性别:</span>
            <select name="" id="">
                <option value="" checked>男</option>
                <option value="">女</option>
            </select>
            <span class="color"></span>
        </div>
        <div>
            <span class="testname">身份证号码:</span>
            <input type="text" title="^\d{15}$|^\d{17}[\dx]$" data-info="密码格式输入错误">
            <span class="color"></span>
        </div>
        <div>
            <span class="testname">邮箱:</span>
            <input type="text" title="^(\w_)*\w+@\w+\.[a-z]+(\.[a-z]*)*$" data-info="邮箱格式输入错误">
            <span class="color"></span>
        </div>
        <div>
            <span class="testname">手机号:</span>
            <input type="text" title="^1\d{10}$" data-info="手机格式输入错误">
            <span class="color"></span>
        </div>
        <div class="goes"><button class="btn" id="btn">提交</button></div>
    </div>
<script type="text/javascript">
    var input=document.getElementsByTagName('input'),
        btn=document.getElementById('btn');
    for(var i=0;i<input.length;i++){
        if(i==2){
            continue;
        }    
        input[i].onblur=function(){
            var str=this.value,
            pattern=new RegExp(this.title);
            console.log(pattern);
            if(pattern.test(str)){
                this.parentNode.lastElementChild.innerHTML='ok';
            }else{
                this.parentNode.lastElementChild.innerHTML=this.getAttribute('data-info');
            }
        }
    }
    input[2].onblur=function(){
        if(this.value){
            if(this.value===input[1].value){
                console.log(1);
                this.parentNode.lastElementChild.innerHTML='ok';
            }else{
                this.parentNode.lastElementChild.innerHTML='两次输入的密码不一致';
                console.log(1);
            }
        }    
    };
    btn.onclick=function(){
        var result=true;
        for(var i=0;i<input.length;i++){
            if(i==2){
                continue;
            }    
            input[i].onblur=function(){
                var str=input[i].value,
                pattern=new RegExp(input[i].title);
                console.log(pattern);
                if(pattern.test(str)){
                    input[i].parentNode.lastElementChild.innerHTML='ok';
                }else{
                    input[i].parentNode.lastElementChild.innerHTML=input[i].getAttribute('data-info');
                    result=false;
                }
            }();
        }
        if(result){
            alert('验证通过');
        }
    }
</script>    
</body>
</html>
写回答
1回答