老师，密码强度提示条无法实现垂直居中

来源：2-25 项目作业

嘉心糖

2021-05-28 00:41:52

<!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>
        .mark::before {
            content: '*';
            color: red;
        }

        .words {
            font-weight: 545;
        }

        .st {
            border-radius: 4px;
            border: 1px solid rgb(86, 85, 85);
            width: 180px;
            height: 20px;
        }

        .box {
            height: 25px;
            border: 1px solid transparent;
            width: 500px;
        }

        .pwd {
            margin-right: 10px;
        }

        .pwd_notice {
            width: 185px;
            height: 11px;
            position: absolute;
            top: 85px;
            left: 94px;
            font-size: 5px;
            line-height: 11px;
        }
        /* 设置密码强度提示盒子样式 */

        .pwd_warn {
            width: 63px;
            height: 6px;
            background-color: rgb(218, 215, 215);
            margin-right: 4px;
            border-radius: 2px;
            float: right;
        }

        .btn {
            width: 155px;
            height: 26px;
            border: 1px solid transparent;
            background-color: rgb(255, 102, 0);
            font-weight: bold;
            color: white;
            position: absolute;
            top: 155px;
            left: 72px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <p>
        <span class="mark words">用 户 名:&nbsp;&nbsp;</span>
        <input type="text" id="nameField" class="nameField st" placeholder="用户名设置成功后不可修改">
        <span class="name_warn" id="name_warn"></span>
    </p>
    <div class="box">
        <span class="mark words">登录密码:&nbsp;</span>
        <input type="text" id="pwd" class="pwd st" placeholder="6-20位字母或数字">
        <span id="pwd_notice" class="pwd_notice"></span>
        <!-- 密码强度提示盒子 -->
        <div id="pwd_warn1" class="pwd_warn"></div>
        <div id="pwd_warn2" class="pwd_warn"></div>
        <div id="pwd_warn3" class="pwd_warn"></div>
    </div>
    <p>
        <span class="mark words">确认密码:&nbsp;</span>
        <input type="text" id="confirmPwd" class="confirmPwd st" placeholder="再次输入您的登录密码">
        <span class="pwd2_warn" id="pwd2_warn"></span>
    </p>
    <p>
        <input type="submit" id="btn" class='btn' value="注册">
    </p>

    <script>
        var nameField = document.getElementById('nameField');
        var name_warn = document.getElementById('name_warn');
        var pwd = document.getElementById('pwd');
        var pwd_notice = document.getElementById('pwd_notice');
        var pwd_warn1 = document.getElementById('pwd_warn1');
        var pwd_warn2 = document.getElementById('pwd_warn2');
        var pwd_warn3 = document.getElementById('pwd_warn3');
        var confirmPwd = document.getElementById('confirmPwd');
        var pwd2_warn = document.getElementById('pwd2_warn');
        var btn = document.getElementById('btn');

        // 用户名
        nameField.onblur = function() {
            var name = nameField.value;
            if (/^[a-zA-Z]\w{5,29}$/.test(name)) {
                name_warn.innerText = '用户名输入正确';
                name_warn.style.color = 'green';
            } else {
                name_warn.innerText = '6-30位字母、数字或‘_’，字母开头';
                name_warn.style.color = 'red';
            }
        }

        // 登录密码
        pwd.onblur = function() {
            var password = pwd.value;
            if (!/^[a-zA-Z0-9]{6,20}$/.test(password)) {
                pwd_notice.innerText = '6-20位字母或数字';
                pwd_notice.style.color = 'red';
                // 强度提示条
                pwd_warn3.style.backgroundColor = 'rgb(218, 215, 215)';
                pwd_warn2.style.backgroundColor = 'rgb(218, 215, 215)';
                pwd_warn1.style.backgroundColor = 'rgb(218, 215, 215)';
            } else {
                if (/^\d{6,20}$|^[a-z]{6,20}$|^[A-Z]{6,20}$/.test(password)) {
                    pwd_notice.innerText = '';
                    pwd_warn3.style.backgroundColor = 'red';
                    pwd_warn2.style.backgroundColor = 'rgb(218, 215, 215)';
                    pwd_warn1.style.backgroundColor = 'rgb(218, 215, 215)';
                } else if (/^[\da-z]{6,20}$|^[\dA-Z]{6,20}$|^[a-zA-Z]{6,20}$/.test(password)) {
                    pwd_notice.innerText = '';
                    pwd_warn3.style.backgroundColor = 'red';
                    pwd_warn2.style.backgroundColor = 'orange';
                    pwd_warn1.style.backgroundColor = 'rgb(218, 215, 215)';
                } else if (/^[\da-zA-Z]{6,20}$/.test(password)) {
                    pwd_notice.innerText = '';
                    pwd_warn3.style.backgroundColor = 'red';
                    pwd_warn2.style.backgroundColor = 'orange';
                    pwd_warn1.style.backgroundColor = 'green';
                }
            }
        }

        // 确认密码
        confirmPwd.onblur = function() {
            var password = pwd.value;
            var confirm = confirmPwd.value;
            if (confirm == '') {
                pwd2_warn.innerText = '输入框不能为空';
                pwd2_warn.style.color = 'red';
            } else if (confirm != password) {
                pwd2_warn.innerText = '两次密码输入不一致，请重新输入';
                pwd2_warn.style.color = 'red';
            } else if (confirm == password) {
                pwd2_warn.innerText = '两次密码输入一致';
                pwd2_warn.style.color = 'green';
            }
        }

        //注册按钮
        btn.onclick = function() {
            var name = nameField.value;
            var password = pwd.value;
            var confirm = confirmPwd.value;
            if (/^[a-zA-Z]\w{6,30}$/.test(name) && /[\da-zA-Z]{6,20}/.test(password) && confirm == password) {
                alert('信息填写正确');
            } else {
                alert('请填写正确的信息');
            }
        }
    </script>
</body>

</html>