我完成修改了，还有2个细节问题。

来源：2-25 项目作业

要每天学习的小蓝同学

2021-05-12 11:00:31

相关代码：

<style>
        .box1 {
            width: 800px;
            height: 300px;
            margin: 100px auto;
            border: 5px solid orange;
            position: relative;
            border-radius: 20px;
        }

        .box2 {
            position: absolute;
            top: 30px;
            left: 100px;
        }

        .box3 {
            position: absolute;
            top: 80px;
            left: 300px;
            width: 400px;
            height: 10px;
        }
        .box3 div {
            float: left;
            margin-right: 10px;
            width: 60px;
            height: 10px;
            background-color: rgb(167, 159, 159);
        }
        .box3 div:first-child {
            width: auto;
            height: auto;
            color: red;
            background-color:#fff;
        }

        .box3 div:last-child {
            margin-right: 0;
        }

        input {
            width: 200px;
            height: 30px;
        }
        #pwdWarning1 {
            display: none;
        }
        #pwdWarning2 {
            display: none;
        }
        #pwdWarning3 {
            display: none;
        }
        .button {
            position: absolute;
            top: 236px;
            left: 190px;
            background-color: orange;
            color: white;
            font-size: 17px;
            border-radius: 8px;
        }
    </style>
</head>

<body>
    <div class='box1'>
        <div class='box2'>
            <p>
                *用&nbsp;&nbsp;户&nbsp;&nbsp;名:
                <input type="text" id='nameField' placeholder="用户名设置成功后不可修改">
                <span id='nameWarning'></span>
            </p>
            <p class='ps'>
                *登录密码:
                <input type="text" id='pwdField' placeholder="6-20位字母或数字">
            </p>
            <div class='box3'>
                <div class="pwdInfo"></div>
                <div id='b1'></div>
                <div id='b2'></div>
                <div id='b3'></div>
            </div>
            <p>
                *确认密码:
                <input type="text" id='pwdSure' placeholder='再次输入您的登录密码'>
                <span id='pwdWarning1'>输入框不能为空</span>
                <span id='pwdWarning2'>两次密码输入不一致</span>
                <span id='pwdWarning3'>两次输入一致</span>
            </p>
        </div>
        <div>
            <input type="button" value='注册' class='button' id='button'>
        </div>
    </div>

    <script>
        var nameField = document.getElementById('nameField');
        var nameWarning = document.getElementById('nameWarning');
        var pwdField = document.getElementById('pwdField');
        var the_b1 = document.querySelector('.box3 #b1');
        var the_b2 = document.querySelector('.box3 #b2');
        var the_b3 = document.querySelector('.box3 #b3');
        var pwdSure = document.getElementById('pwdSure');
        var pwdWarning1 = document.getElementById('pwdWarning1');
        var pwdWarning2 = document.getElementById('pwdWarning2');
        var pwdWarning3 = document.getElementById('pwdWarning3');
        var button = document.getElementById('button');
        var pwdInfo=document.querySelector('.pwdInfo')

        // 用户名
        nameField.onblur = function () {
            if (/^[a-zA-Z]\w{5,29}$/.test(nameField.value)) {
                // 如果校验通过
                nameWarning.innerText = '用户名输入正确';
                nameWarning.style.color = 'green';
            } else {
                // 如果校验没有通过
                nameWarning.innerText = '6-30位字母、数字或_， 以字母开头';
                nameWarning.style.color = 'red';
            }
        };


        // 纯小写字母或者纯大写字母或者纯数字
        var regexp1 = /^[a-z]{6,20}$|^[A-Z]{6,20}$|^[0-9]{6,20}$/;
        // 小写大写、小写数字、大写数字
        var regexp2 = /^[a-zA-Z]{6,20}$|^[a-z0-9]{6,20}$|^[A-Z0-9]{6,20}$/;
        // 大小写数字都有
        var regexp3 = /^[a-zA-Z0-9]{6,20}$/;

        // 登录密码
        pwdField.onblur = function () {
            if(regexp3.test(pwdField.value)){
                pwdInfo.innerText='';
                the_b1.style.display='block';
                the_b2.style.display='block';
                the_b3.style.display='block';
                if (regexp1.test(pwdField.value)) {
                    the_b1.style.backgroundColor = 'red';
                } else if (regexp2.test(pwdField.value)) {
                    the_b1.style.backgroundColor = 'red';
                    the_b2.style.backgroundColor = 'orange';
                } else if (regexp3.test(pwdField.value)) {
                    the_b1.style.backgroundColor = 'red';
                    the_b2.style.backgroundColor = 'orange';
                    the_b3.style.backgroundColor = 'green';
                }
            }else{
                the_b1.style.display='none';
                the_b2.style.display='none';
                the_b3.style.display='none';
                pwdInfo.innerText='6-20位字母或数字';
            }
        };  

        // 确认密码
        pwdSure.onblur = function () {
            if (pwdSure.value === '') {
                pwdWarning1.style.display='inline';
                pwdWarning2.style.display='none';
                pwdWarning3.style.display='none';
                pwdWarning1.style.color = 'red';
            } else if (pwdSure.value != pwdField.value) {
                pwdWarning2.style.display='inline';
                pwdWarning1.style.display='none';
                pwdWarning3.style.display='none';
                pwdWarning2.style.color = 'red';
            } else if(pwdSure.value === pwdField.value){
                pwdWarning3.style.display='inline';
                pwdWarning1.style.display='none';
                pwdWarning2.style.display='none';
            }
        };

        // 注册
        button.onclick=function(){
            if(/^[a-zA-Z]\w{5,29}$/.test(nameField.value)&&(regexp1.test(pwdField.value)||regexp2.test(pwdField.value)||regexp3.test(pwdField.value))&&pwdSure.value === pwdField.value){
                alert('信息填写正确');
            }else {
                alert('请填写正确的信息');
            }
        };
        // console.log(pwdSure);
        // console.log(pwdWarning1);
        // console.log(pwdWarning2);
        // console.log(pwdWarning3);
        // console.log(nameField);
        // console.log(pwdField);
        // console.log(nameWarning);
        // console.log(b1);
        // console.log(b2);
        // console.log(b3);
        // console.log(button);
        console.log(pwdInfo);
    </script>
</body>

老师您好，innerHTML跟innerText有什么区别吗？老师您用的是innerHTML的。innerHTML不是用于没有HTML结构的时候才用的吗？比如

innerHTML='<span>我xxxxx<span>';

获取节点

document.getElementById('span');

innerText=‘’接的不是纯文本吗？

// 登录密码
        pwdField.onblur = function () {
            if(regexp3.test(pwdField.value)){
                pwdInfo.innerText='';
                the_b1.style.display='block';
                the_b2.style.display='block';
                the_b3.style.display='block';
                if (regexp1.test(pwdField.value)) {
                    the_b1.style.backgroundColor = 'red';
                } else if (regexp2.test(pwdField.value)) {
                    the_b1.style.backgroundColor = 'red';
                    the_b2.style.backgroundColor = 'orange';
                } else if (regexp3.test(pwdField.value)) {
                    the_b1.style.backgroundColor = 'red';
                    the_b2.style.backgroundColor = 'orange';
                    the_b3.style.backgroundColor = 'green';
                }
            }else{
                the_b1.style.display='none';
                the_b2.style.display='none';
                the_b3.style.display='none';
                pwdInfo.innerText='6-20位字母或数字';
            }
        };