[原创]js原生密码强度效果 

<!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>
    <title>密码强度</title>
    <style type="text/css">
        .tbPwdStrength
        {
            width: 210px;
            height: 15px;
            background-color: #eeeeee;
            border: 1px solid #ccc;
            border-radius: 2px;
            font-family: 微软雅黑;
            font-size: 12px;
            color: #000;
            display: inline-block;
        }
        .tbPwdStrength td
        {
            width: 70px;
            line-height: 15px;
            text-align: center;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            opacity: 0.5;
        }
    </style>
    <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 < 6)
                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:
                        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;
            return;
        }
    </script>
</head>
<body>

<input id="user_pwd" name="user_pwd" type="password" maxlength="10" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)" value="" />

<table class="tbPwdStrength" cellspacing="0" cellpadding="0"> 
    <tr>
        <td id="strength_L">弱</td>
        <td id="strength_M">中</td>
        <td id="strength_H">强</td>
    </tr> 
</table>

</body>
</html>

 

posted @ 2014-10-31 14:12  代码啦  阅读(371)  评论(0)    收藏  举报