用正则编写密码强度_<input type="password" id="password" onkeyup方法用正则表-优快云博客

本文介绍了一种密码强度检测方法，通过分析密码组成元素（字母、数字、特殊字符）来评估其安全性，并使用CSS样式增强用户界面反馈。同时，提供了JavaScript实现密码强度实时反馈的代码。

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

密码安全程度
弱：全部为字母或者数字,或者密码长度小于6
中 : 字母数字组成，或者字母特殊字符，或者数字和特殊字符
强 : 字母和数字和特殊字符

CSS样式

 .pw_letter {
            margin-top: 5px;
            font-size: 12px;
        }

        .pw_letter label {
            float: left;
            margin-right: 10px;
            cursor: default;
            font-size: 12px;
            line-height: 16px;
            ;
        }

        .pw_letter span {
            float: left;

            width: 30px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            color: #FFF;
            background-color: #ccc;
            border-left: 1px solid #FFF;
        }

        .pw_letter span.pw_strength_color {
            background-color: green;
        }

html

 <input id="password" type="password" name="password" placeholder="密码"
        onKeyUp="setPasswordStrength(this.value.trim())">
    <div class="pw_letter"><label>安全程度</label> <span class="strength">弱</span> <span class="strength">中</span>

        <span class="strength">强</span> </div>

js

 /*
        *密码安全程度
        *return 1 ：全部为字母或者数字,或者密码长度小于6
        *return 2 : 字母数字组成，或者字母特殊字符，或者数字和特殊字符
        *return 3 : 字母和数字和特殊字符
        */
        String.prototype.passwordStrength = function () {
            if (this.length > 0 && this.length <= 6) return 1;
            var n1 = (this.search(/[a-zA-Z]/) != -1) ? 1 : 0,
                n2 = (this.search(/[0-9]/) != -1) ? 1 : 0,
                n3 = (this.search(/[\~\`\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\?]{1,}/) != -1) ? 1 : 0;
            return n1 + n2 + n3;
        }

        String.prototype.trim = String.prototype.trim || function () {
            return this.replace(/^\s+|\s+$/g, "");
        }

        function setPasswordStrength(pwd) {
            var strength_span = document.getElementsByClassName("strength");
            for (var i = 0; i < strength_span.length; i++) {
                strength_span.item(i).className = "strength";
            }
            for (var i = 0; i < pwd.passwordStrength(); i++) {
                document.getElementsByClassName("strength").item(i).className = "strength pw_strength_color";
            }
        }