【正则表达式】在表单中输入密码，展示密码的强度

bo · 发表于2021-10-28 23:28:06

只包含数字，密码强度:弱
只包含小写英文字母，密码强度:弱
只包含其他符号，密码强度:弱
包含数字和小写英文字母，密码强度:中
包含数字和其他符号，密码强度:中
包含其他符号和小写英文字母，密码强度:中

包含数字和小写英文字母、其他符号，密码强度:强

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td > div {
            width: 200px;
            height: 60px;
            padding-top: 30px;

        }

        td > div > div {
            width: 60px;
            height: 8px;
            float: left;
            margin: 2px;
            text-align: center;
        }

        td > div > div.d1 {
            background-color: silver;
        }

    </style>

    <script>
      
        function f() {
            let input = document.getElementById("text").value;
            let lv = 0;//定义一个变量意思就是等级
            if (/^.{6,15}$/.exec(input)) {//任意字符 6-15位
                if (/\d/.exec(input)){
                    lv++;//如果全是数字，等级加1
                }
                if (/[a-z]/.exec(input)){
                    lv++//全是字母 等级加1
                }
                if (/[^0-9a-z]/.exec(input)){
                    lv++//[^]代表取反，如果不是数字和字母 等级加1

                }

            }
            a=document.getElementsByClassName("d1");
            for (let i = 0; i <a.length ; i++) {
                if (i<lv){//如果数值比等级小了变成绿色
                    a[i].style.backgroundColor="green";
                }else {
                    a[i].style.backgroundColor="silver";//如果数值比等级大了，变成灰色 也就是返回去
                }

            }
            console.log(lv)
        }
    </script>
</head>
<body>
<form>
    <table>
        <tr>
            <td>密码</td>
            <td><input type="text" id="text" oninput="f()"></td>
            <td>
                <div>
                    <div class="d1"></div>
                    <div class="d1"></div>
                    <div class="d1"></div>
                    <div>弱</div>
                    <div>中</div>
                    <div>强</div>
                </div>
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</form>
</div>
</body>
</html>

用户名			找回密码
密码			立即注册

学习平台

【正则表达式】在表单中输入密码，展示密码的强度