老师,修改过后,密码强度还是没有出现

来源:2-25 项目作业

DB1时间的玫瑰

2021-08-10 11:49:22

<!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>完成注册功能</title>

    <style>

        * {

            margin0;

            padding0;

        }


        .box {

            width1200px;

            margin20px auto;

        }


        .box .warning {

            font-size18px;

        }


        .box1,

        .box2,

        .box3 {

            margin-top20px;

            margin-left50px;

            font-size30px;

        }


        .box1 b,

        .box2 b,

        .box3 b {

            colorred;

        }


        .box1 p,

        .box2 p,

        .box3 p {

            positionrelative;

            top-42px;

            left19px;

        }


        .box1 input,

        .box2 input,

        .box3 input {

            width200px;

            height30px;

            padding-left5px;

        }


        .box1 .warning {

            colorred;

            displaynone;

        }


        .box4 button {

            width200px;

            height40px;

            margin-left150px;

            background-colororange;

            colorwhite;

            text-aligncenter;

            line-height40px;

            font-size18px;

            bordernone;

            border-radius5px;

        }


        .redPassWordWarning,

        .orangePassWordWarning,

        .greenPassWordWarning {

            width40px;

            height4px;

            displaynone;

        }

    </style>

</head>


<body>

    <div id="box" class="box">

        <div class="box1">

            <b>*</b>

            <p>

                用户名:

                <input type="text" id="userName" placeholder="用户名设置完成不可修改">

                <span class="warning" id="userWarning">6-30位字母、数字或’_’,字母开头</span>

            </p>

        </div>

        <div class="box2">

            <b>*</b>

            <p>

                登录密码:

                <input type="password" id="userPassword" placeholder="6-20位字母或者数字">

                <span class="warning" id="redPassWordWarning"></span>

                <span class="warning" id="orangePassWordWarning"></span>

                <span class="warning" id="greenPassWordWarning"></span>

                <span class="warning" id="userPasswordWarning"></span>

            </p>

        </div>

        <div class="box3">

            <b>*</b>

            <p>

                确认密码:

                <input type="password" id="confirmPass" placeholder="再次输入你的登录密码">

                <span class="warning" id="confirmPassWarning">两次输入一致</span>

            </p>

        </div>

        <div class="box4">

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

        </div>

    </div>

    <script>

        // 得到元素

        var box = document.getElementById('box');

        var userName = document.getElementById('userName');

        var userWarning = document.getElementById('userWarning');

        var userPassword = document.getElementById('userPassword');

        var redPassWordWarning = document.getElementById('redPassWordWarning');

        var orangePassWordWarning = document.getElementById('orangePassWordWarning');

        var greenPassWordWarning = document.getElementById('greenPassWordWarning');

        var userPasswordWarning = document.getElementById('userPasswordWarning');

        var confirmPass = document.getElementById('confirmPass');

        var btn = document.getElementById('btn');


        // 当文本框失去焦点,即光标不在文本框中了

        // 用户名

        userName.onblur = function () {

            // 得到用户名

            var name = userName.value;

            // 校验是否通过

            if (/^[a-zA-Z]\w{5,29}$/.test(name)) {

                // 通过校验,提示用户输入正确

                userWarning.innerText = '用户输入正确';

                // 改变字体颜色

                userWarning.style.color = 'green';

                // 显示提示信息

                userWarning.style.display = 'inline';

            } else {

                // 没有通过

                userWarning.innerText = '6-30位字母、数字或’_’,字母开头';

                userWarning.style.color = 'red';

                userWarning.style.display = 'inline';

            }

        };

        //密码

        userPassword.onblur = function () {

            // 得到密码

            var password = userPassword.value;

            // 设置密码强度提示框的颜色

            redPassWordWarning.style.backgroundColor = '#ccc';

            orangePassWordWarning.style.backgroundColor = '#ccc';

            greenPassWordWarning.style.backgroundColor = '#ccc';

            // 第一次校验密码是否符合要求

            if (/^[a-zA-Z0-9]{6,20}$/.test(password)) {

                // 通过第一次校验后,判断密码等级并隐藏文字提示信息

                userPasswordWarning.style.display = 'none';

                // 设置密码强度提示框display属性为inline-block,让其一排显示

                redPassWordWarning.style.display = 'inline-block';

                orangePassWordWarning.style.display = 'inline-block';

                greenPassWordWarning.style.display = 'inline-block';

                if (/^[0-9]{6,20}$|^[a-z]{6,20}$|^[A-Z]{6,20}$/.test(password)) {

                    redPassWordWarning.style.backgroundColor = 'red';

                    // 设置其他框为灰色

                    orangePassWordWarning.style.backgroundColor = 'gray';

                    greenPassWordWarning.style.backgroundColor = 'gray';

                } else if (/^[0-9a-z]{6,20}$|^[0-9A-Z]{6,20}$|^[a-zA-Z]{6,20}$/.test(password)) {

                    redPassWordWarning.style.backgroundColor = 'red';

                    orangePassWordWarning.style.backgroundColor = 'orange';

                    greenPassWordWarning.style.backgroundColor = 'gray';

                } else {

                    redPassWordWarning.style.backgroundColor = 'red';

                    orangePassWordWarning.style.backgroundColor = 'orange';

                    greenPassWordWarning.style.backgroundColor = 'green';

                }

            } else {

                // 没有通过,显示文字提示信息

                userPasswordWarning.innerText = '6-20位字母、数字';

                userPasswordWarning.style.display = 'inline-block';

                // 密码强度提示框隐藏

                redPassWordWarning.style.display = 'none';

                orangePassWordWarning.style.display'none';

                greenPassWordWarning.style.display = 'none';

            }

        };

    </script>

</body>


</html>


写回答

1回答

好帮手慕然然

2021-08-10

同学你好,这是因为给实现密码强度的元素设置的CSS样式没有生效,而样式没有生效是因为css选择器的问题:redPassWordWarning、orangePassWordWarning和greenPassWordWarning,这些值是id属性的值,不是class属性的值,应该使用#开头的id选择器选中这些元素施加样式,参考如下:

http://img.mukewang.com/climg/61120d1309d0b1b008030713.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程