Javascript 评估用户输入密码的强度

最新推荐文章于 2025-08-15 22:56:20 发布

weixin_34235105

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/376755

本文介绍了一种检测密码强度的方法，通过分析密码的长度及组成元素（数字、大小写字母、特殊符号），将密码强度分为弱、中、强三个等级，并提供了一个JavaScript实现的示例代码。

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

什么是一个安全的密码呢?

　　1.如果密码少于5位,那么就认为这是一个弱密码.

　　2.如果密码只由数字、小写字母、大写字母或其它特殊符号当中的一种组成,则认为这是一个弱密码.

　　3.如果密码由数字、小写字母、大写字母或其它特殊符号当中的两种组成,则认为这是一个中度安全的密码.

　　4.如果密码由数字、小写字母、大写字母或其它特殊符号当中的三种以上组成,则认为这是一个比较安全的密码.

　　根据用户输入的密码分别显示不同的颜色表示密码的强度,具体程代码如下：

<form name=form1 action="">
    输入密码:<input title="" type=password size=10 onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)">
    <br>密码强度:
    <table width="217" border="1" cellspacing="0" cellpadding="1"  style='display:inline'>
        <tr align="center" bgcolor="#eeeeee">
            <td width="33%" id="strength_L">弱</td>
            <td width="33%" id="strength_M">中</td>
            <td width="33%" id="strength_H">强</td>
        </tr>
    </table>
</form>

<script language=javascript>
    //CharMode函数
    //测试某个字符是属于哪一类.
    function CharMode(iN) {
        if (iN >= 48 && iN <= 57) //数字
            return 1;
        if (iN >= 65 && iN <= 90) //大写字母
            return 2;
        if (iN >= 97 && iN <= 122) //小写
            return 4;
        else
            return 8; //特殊字符
    }

    //bitTotal函数
    //计算出当前密码当中一共有多少种模式
    function bitTotal(num) {
        var modes = 0;
        for (i = 0; i < 4; i++) {
            if (num & 1) modes++;
            num >>>= 1;
        }
        return modes;
    }

    //checkStrong函数
    //返回密码的强度级别
    function checkStrong(sPW) {
        if (sPW.length <= 4)
            return 0; //密码太短
        var Modes = 0;
        for (i = 0; i < sPW.length; i++) {
         //测试每一个字符的类别并统计一共有多少种模式.
            Modes |= CharMode(sPW.charCodeAt(i));
        }
        return bitTotal(Modes);
    }

    //pwStrength函数
    //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
    function pwStrength(pwd) {
        var O_color = "#eeeeee";
        var L_color = "#FF0000";
        var M_color = "#FF9900";
        var H_color = "#33CC00";
        if (pwd == null || pwd == '') {
            Lcolor = Mcolor = Hcolor = O_color;
        }
        else {
            S_level = checkStrong(pwd);
            switch (S_level) {
                case 0:
                    Lcolor = Mcolor = Hcolor = O_color;
                case 1:
                    Lcolor = L_color;
                    Mcolor = Hcolor = O_color;
                    break;
                case 2:
                    Lcolor = Mcolor = M_color;
                    Hcolor = O_color;
                    break;
                default:
                    Lcolor = Mcolor = Hcolor = H_color;
            }
        }

        document.getElementById("strength_L").style.background = Lcolor;
        document.getElementById("strength_M").style.background = Mcolor;
        document.getElementById("strength_H").style.background = Hcolor;
    }
</script>