Password security level authentication

最新推荐文章于 2023-03-13 11:28:58 发布

原创最新推荐文章于 2023-03-13 11:28:58 发布 · 782 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#security #密码 #安全 #html #javascript

HTML/HTML5 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个用于检测密码强度的网页应用，通过分析密码长度及组成元素（如大小写字母、数字和特殊字符）来评估密码的安全等级，并用不同颜色标记低、中、高的安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <title>密码安全等级验证</title>
    <style type="text/css">
        .pwd-strength-box-low
        {
            color: #003300;
            background-color: #E60404;
        }
        .pwd-strength-box-med
        {
            color: #003300;
            background-color: #FFAC16;
        }
        .pwd-strength-box-hi
        {
            color: #003300;
            background-color: #32BF40;
        }
    </style>
    <script type="text/javascript">
        function checkPassword(pwd)
        {
            var objLow = document.getElementById("pwdLow");
            var objMed = document.getElementById("pwdMed");
            var objHi = document.getElementById("pwdHi");
            objLow.className = "pwd-strength-box";
            objMed.className = "pwd-strength-box";
            objHi.className = "pwd-strength-box";
            if (pwd.length < 6)
            {
                objLow.className = "pwd-strength-box-low";      //只要密码长度小于6就为低
            }
            else
            {
                var p1 = (pwd.search(/[a-zA-Z]/) != -1) ? 1 : 0;        //大小写字母
                var p2 = (pwd.search(/[0-9]/) != -1) ? 1 : 0;           //数字
                var p3 = (pwd.search(/[^A-Za-z0-9_]/) != -1) ? 1 : 0;   //特殊字符
                var pa = p1 + p2 + p3;
                if (pa == 1)
                {
                    objLow.className = "pwd-strength-box-low";
                } else if (pa == 2) {
                    objMed.className = "pwd-strength-box-med";
                } else if (pa == 3) {
                    objHi.className = "pwd-strength-box-hi";
                }
            }
        }
    </script>
</head>
<body>
   
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <table cellspacing="0" cellpadding="0"
        width="400" align="center" bgcolor="#ffffff" border="1">
        <tbody>
            <tr>
                <td align="center" bgcolor="#ffffcc" colspan="2" height="22">
                    <span><b>校验密码安全性</b></span>
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    请输入密码：
                </td>
                <td>
                    <input onkeyup="checkPassword(this.value);" type="password" value=""
                        name="password" style="width: 229px" />
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    安全性等级：
                </td>
                <td>
                    <table cellspacing="0" cellpadding="0"
                        width="100%">
                        <tbody>
                            <tr>
                                <td id="pwdLow">
                                    低
                                </td>
                                <td id="pwdMed">
                                    中
                                </td>
                                <td id="pwdHi">
                                    高
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <span class="redFont">建议至少 6 个字符. 请使用强密码以保证安全.</span>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>