案例中是怎么做到如果有错误信息就自动刷新页面的？

来源：3-9 编程练习

宝慕林3013065

2020-06-12 16:53:13

<!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 input1=false;
        var input2=false;
        var input3=false;
        
        username.onblur = function(){
            var reg = /^\w{6,18}$/;
            spans[0].innerHTML = '请输入6-18位字母、数字、下划线';
            if(!reg.test(username.value)){
                spans[0].innerHTML = '格式不正确';
            }else{
                spans[0].innerHTML = '';
                input1 = true;
            }
        }
        username.onfocus = function(){
            spans[0].innerHTML = '请输入6-18位字母、数字、下划线';
        }
        
        chinaName.onblur = function(){
            var reg = /^[\u4e00-\u9fa5]{2,4}$/;
            spans[1].innerHTML = '请输入2-4位中文';
            if(!reg.test(chinaName.value)){
                spans[1].innerHTML = '格式不正确';
            }else{
                spans[1].innerHTML = '';
                input2 = true;
            }
        }
        chinaName.onfocus = function(){
            spans[1].innerHTML = '请输入2-4位中文';
        }
        
        email.onblur = function(){
            var reg = /^\w+@\w+\.[a-zA-Z]{2,4}$/;
            spans[2].innerHTML = '请输入邮箱';
            if(!reg.test(email.value)){
                spans[2].innerHTML = '格式不正确';
            }else{
                spans[2].innerHTML = '';
                input3 = true;
            }
        }
        email.onfocus = function(){
            spans[2].innerHTML = '请输入邮箱';
        }
        
        submit.onclick = function(){
            if(input1==false || input2==false || input3==false){
                alert('您输入的信息有误！');
            }else{
                alert('注册成功！');
            }
        }
    </script>
</body>

写回答

1回答