用正则编写密码强度

本文介绍了一种密码强度检测方法,通过分析密码组成元素(字母、数字、特殊字符)来评估其安全性,并使用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";
            }
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值