输入框中没有内容了

来源：3-9 编程练习

慕慕1502015

2020-10-30 21:58:07

# 具体遇到的问题
代码似乎是没有报错，但是为什么输入内容之后再失去光标内容就没有了。
# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输<!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"),
            username=document.getElementById("username"),
            chinaName=document.getElementById("chinaName"),
            email=document.getElementById("email"),
            submit=document.getElementById("submit"),
            input1=false,
            input2=false,
            input3=false;
        username.onfocus=function(){
            spans[0].innerHTML="请输入6-18位字母、数字、下划线";
        }
        chinaName.onfocus=function(){
            spans[1].innerHTML="请输入中文名";
        }
        email.onfocus=function(){
            spans[2].innerHTML="请输入邮箱";
        }
        username.onblur=function(){
            var reg = /^\w{6,18}$/;
            if(username.value=""){
                spans[0].innerHTML="账户名为空";
                spans[0].style.color="red";
            }else if(reg.test(username.value)){
                span[0].innerHTML="";
                input1=ture;
            }else{
                spans[0].innerHTML="请输入6-18位字母、数字、下划线";
                spans[0].style.color="red";
            }
        }
        chinaName.onblur=function(){
            var reg = /^[\u4e00-\u9fa5]{2,4}$/;
            if(chinaName.value=""){
                spans[1].innerHTML="姓名为空";
                spans[1].style.color="red";
            }else if(reg.test(chinaName.value)){
                span[1].innerHTML="";
                input2=ture;
            }else{
                spans[1].innerHTML="请输入中文名";
                spans[1].style.color="red";
            }
        }
        email.onblur=function(){
            var reg = /^\w+@\w+(?:\.[a-z]{2,4})+$/;
            if(email.value=""){
                spans[2].innerHTML="邮箱为空";
                spans[2].style.color="red";
            }else if(reg.test(email.value)){
                span[2].innerHTML="";
                input3=ture;
            }else{
                spans[2].innerHTML="请输入邮箱";
                spans[2].style.color="red";
            }
        }
        submit.onclick=function(){
            if(input3||input1||input2){
                alert("注册成功");
            }else{
                alert("请按要求完成全部信息！");
            }
        }
    </script>
</body>

</html>

入代码，可通过选择【代码语言】突出显示