javascript 检测密码强度

浏览数：16 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/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) {
            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; //密码太短
            Modes = 0;
            for (i = 0; i < sPW.length; i++) {
                //测试每一个字符的类别并统计一共有多少种模式.
                Modes |= CharMode(sPW.charCodeAt(i));
            }

            return bitTotal(Modes);

        }

        //pwStrength函数
        //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色

        function pwStrength(pwd) {
            O_color = "#eeeeee";
            L_color = "#FF0000";
            M_color = "#FF9900";
            H_color = "#33CC00";
            if (pwd == null || pwd == ‘‘) {
                Lcolor = Mcolor = Hcolor = O_color;
            }
            else {
                S_level = checkStrong(pwd);
                switch (S_level) {
                    case 0:
                        document.getElementById("msg").innerHTML=‘?‘;
                        Lcolor = Mcolor = Hcolor = O_color;
                    case 1:
                        Lcolor = L_color;
                        Mcolor = Hcolor = O_color;
                        document.getElementById("msg").innerHTML=‘Weak‘;
                        break;
                    case 2:
                        Lcolor = Mcolor = M_color;
                        Hcolor = O_color;
                        document.getElementById("msg").innerHTML=‘Normal‘;
                        break;
                    default:
                        document.getElementById("msg").innerHTML=‘Strong‘;
                        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;
            return;
        }
    </script>
</head>
<body>
    <form name="form1" action="">
    输入密码:<input type="password" size="10" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)">
    <br>
    密码强度:
    <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"
        height="23" 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>
    <div id="msg"></div>
</body>
</html>