JavaScript-密码强度

最新推荐文章于 2025-04-25 14:55:54 发布

陈新月-Phyllis

最新推荐文章于 2025-04-25 14:55:54 发布

阅读量498

点赞数

CC 4.0 BY-SA版权

分类专栏： # JavaScript 文章标签：密码强度 JavaScrip

本文链接：https://blog.youkuaiyun.com/csxypr/article/details/79362231

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的密码强度检测实现方案，通过判断密码是否包含数字、字母及特殊字符来评估密码强度，并提供了完整的HTML与JavaScript代码。

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

今天小小咸儿发现了一件好玩的事情，就是在注册的时，通常需要设置密码（这是当然的咯！！！），然后发现根据数字、字母、特殊符号的加入，它显示的密码强度也会不同，例如：

    如果为任意一种的话：
这里写图片描述
    如果任意两者结合的话：

    如果三者结合的话：

    今天小咸儿就来给大家分享一下如何实现这种密码强度的设置：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        onload = function () {
            var pwd = document.getElementById("pwd");
            pwd.onkeyup = function () {
                var level = 0;
                var input = this.value;
                //if (input.length < 6) return;
                //验证
                //数字 字母 特殊字符     密码的构成
                // 111   三个都包含
                // 011 101 110    只包含其中两个
                // 100 010 001    只包含一个
                //看你满足数字吗？ +1
                //看你满足字母吗？ +1
                //看你满足特殊字符吗？ +1
                //权值

                if (/[a-zA-Z]+/.test(input)) {
                    level++;
                }
                if (/\d+/.test(input)) {
                    level++;
                }
                if (/[~!#@$%^&*\(\)\-\_\+\=\{\}\[\]\).]+/.test(input)) {
                    level++;
                }
                var msg = document.getElementById("msg");
                msg.innerHTML = ",<span style=\"background-color:red;\">弱</span>,<span style=\"background-color:yellow;\">中等</span>,<span style=\"background-color:green;\">强</span>".split(',')[level];
            };
        };
    </script>
</head>
<body>
    <input type="text" name="name" value="" id="pwd"/>
    <p id="msg"></p>
</body>
</html>