密码强度颜色块的background-color属性无法更改

首页课程实战体系课手记专栏慕课教程

来源：2-25 项目作业

小fa花

2021-10-14 19:26:14

问题描述：

老师，密码强度颜色块部分的js代码，无法更改颜色块span的背景色，麻烦看看是什么原因，以及校验密码部分的代码还可以如何优化，谢谢

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .register {
            border: 2px orange solid;
            border-radius: 10px;
            width: 800px;
            height: 300px;
            margin: 30px auto;
        }

        .register dl {
            width: 800px;
            height: 30px;
            font-size: 18px;
            line-height: 30px;
            margin: 20px 20px;
        }

        .register dl span {
            color: orange;
        }

        .register dl dt,
        dd {
            display: inline-block;
        }

        .register dl dt span {
            color: red;
        }

        .register dl dd input {
            display: inline-block;
            width: 300px;
            height: 25px;
            line-height: 25px;
            font-size: 18px;
        }

        .register dl .box {
            display: inline-block;
        }

        .register dl .box .bbox {
            font-size: 10px;
            display: inline-block;
            width: 50px;
            height: 10px;
            background-color: rgb(174, 173, 173);
        }

        .register dl .box .red {
            display: inline-block;
            width: 50px;
            height: 10px;
            background-color: red;
        }

        .register button {
            display: inline-block;
            width: 80px;
            height: 40px;
            margin-left: 50px;
            color: white;
            background-color: orange;
            border: yellow 1px solid;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        .register button:hover {
            background-color: rgb(211, 211, 0);
        }
    </style>
</head>

<body>
    <!-- 设置页面框架 -->
    <div class="register">
        <!-- 用定义列表设置页面布局 -->

        <!-- 用户名部分 -->
        <dl>
            <dt>
                <span>*</span>用&nbsp;户&nbsp;名&nbsp;：
            </dt>
            <dd>
                <input type="text" placeholder="用户设置成功后不可修改" id="username">
            </dd>
            <span id="userspan" class="userspan">
                6-30位字母、数字或“_”，字母开头
            </span>
        </dl>

        <!-- 登录密码部分 -->
        <dl>
            <dt>
                <span>*</span>登录密码：
            </dt>
            <dd>
                <input type="text" placeholder="6-20位字母或数字" id="pswone">
            </dd>
            <div class="box" id="box">
                <span id="bbox1" class="bbox"></span>
                <span id="bbox2" class="bbox"></span>
                <span id="bbox3" class="bbox"></span>
            </div>
        </dl>

        <!-- 确认密码部分 -->
        <dl>
            <dt>
                <span>*</span>确认密码：
            </dt>
            <dd>
                <input type="password" placeholder="再次输入您的登录密码" id="pswtwo">
            </dd>
            <span id="pswspan" class="pswspan"></span>
        </dl>

        <button id="btn">注册</button>
    </div>


    <script>
        // 三个input框的获取
        var userName = document.getElementById('username');
        var pswOne = document.getElementById('pswone');
        var pswTwo = document.getElementById('pswtwo');
        // input框后面的提示部分
        var userSpan = document.getElementById('userspan');
        var oBox = document.getElementById('box');
        var bBox1 = document.getElementById('bbox1');
        var bBox2 = document.getElementById('bbox2');
        var bBox3 = document.getElementById('bbox3');
        var pswSpan = document.getElementById('pswspan');
        // 按钮获取
        var btn = document.getElementById('btn');

        // 设置用户名的正则
        var nameReg = /^[a-zA-Z][0-9a-zA-Z_]{5,29}$/;
        // 设置用户名正确标志
        var nameFlag;
        //检查用户名是否合法
        function namecheck() {
            // 获取用户名输入框的内容
            var aName = userName.value;
            if (nameReg.test(aName)) {
                userSpan.innerText = "用户名输入正确";
                userSpan.style.color = 'green';
                nameFlag = 1;
            } else {
                userSpan.innerText = "6-30位字母、数字或“_”，字母开头";
                userSpan.style.color = 'red';
                nameFlag = 0;
            }
        }
        userName.onblur = function () {
            namecheck();
        }

        // 设置密码的正则
        var pswlow = /^[0-9]{6-20}$|^[a-z]{6-20}$|^[A-Z]{6-20}$/;                 //低强度
        var pswmid = /^[0-9a-z]{6-20}$|^[a-zA-Z]{6-20}$|^[0-9A-Z]{6-20}$/;        //中强度
        var pswhigh = /^[0-9a-zA-Z]{6-20}$/;                                      //高强度

        // 设置密码初次合法标志
        var pswFlag;
        // 检查密码是否合法
        function pswcheck() {
            // 获取密码输入框内容
            var aPsw = pswOne.value;
            if (pswlow.test(aPsw)) {
                oBox.innerText = '';
                bBox1.style.backgroundColor = 'red';
                pswFlag = 1;
            } else if (pswmid.test(aPsw)) {
                oBox.innerText = '';
                bBox1.style.backgroundColor = 'red';
                bBox2.style.backgroundColor = 'orange';
                pswFlag = 1;
            } else if (pswhigh.test(aPsw)) {
                oBox.innerText = '';
                bBox1.style.backgroundColor = 'red';
                bBox2.style.backgroundColor = 'orange';
                bBox3.style.backgroundColor = 'green';
                pswFlag = 1;
            } else {
                //如果密码不合法就不显示强度
                bBox1.style.display = 'none';
                bBox2.style.display = 'none';
                bBox3.style.display = 'none';
                //显示提示内容
                oBox.innerText = '6-20位字母或数字';
                oBox.style.color = 'red';
                pswFlag = 0;
            }
        }

        pswOne.onblur = function () {
            pswcheck();
        }

        //设置检查正确的合法标志
        var reFlag;
        // 检查两次密码输入是否一致
        function recheck(){
            var rePsw = pswTwo.value;
            if(rePsw==pswOne.value){
                pswSpan.innerText = '两次输入一致';
                pswSpan.style.color = 'green';
                reFlag = 1;
            }else {
                pswSpan.innerText = '两次密码输入不一致，请重新输入';
                pswSpan.style.color = 'red';
                reFlag = 0;
            }
        }

        pswTwo.onblur = function(){
            recheck();
        }

        btn.onclick = function(){
            if(nameFlag && pswFlag && reFlag){
                alert('信息填写正确');
            }else {
                alert('请填写正确的信息');
            }
        }
    </script>
</body>

</html>