<form name="form1" action="">
    密码:<input type="password" size="8" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)">
    <br>
    密码强度:
    <table width="220px" border="1" cellspacing="0" cellpadding="1" bordercolor="#eeeeee" height="22px">
        <tr align="center" bgcolor="#f5f5f5">
            <td width="33%" id="strength_L">弱</td>
            <td width="33%" id="strength_M">中</td>
            <td width="33%" id="strength_H">强</td>
        </tr>
    </table>
</form>

function pwdStrength(pwd) {
    O_color = "#eeeeee";
    L_color = "#FF0000";
    M_color = "#FF9900";
    H_color = "#33CC00";
    var level = 0, strength = "O";
    if (pwd == null || pwd == '') {
        strength = "O";
        Lcolor = Mcolor = Hcolor = O_color;
    }
    else {
        var mode = 0;
        if (pwd.length <= 4)
            mode = 0;
        else {
            for (i = 0; i < pwd.length; i++) {
                var charMode, charCode;
                charCode = pwd.charCodeAt(i);
                // 判断输入密码的类型
                if (charCode >= 48 && charCode <= 57) //数字 
                    charMode = 1;
                else if (charCode >= 65 && charCode <= 90) //大写 
                    charMode = 2;
                else if (charCode >= 97 && charCode <= 122) //小写 
                    charMode = 4;
                else
                    charMode = 8;
                mode |= charMode;
            }
            // 计算密码模式
            level = 0;
            for (i = 0; i < 4; i++) {
                if (mode & 1)
                    level++;
                mode >>>= 1;
            }
        }
        switch (level) {
            case 0:
                strength = "O";
                Lcolor = Mcolor = Hcolor = O_color;
                break;
            case 1:
                strength = "L";
                Lcolor = L_color;
                Mcolor = Hcolor = O_color;
                break;
            case 2:
                strength = "M";
                Lcolor = Mcolor = M_color;
                Hcolor = O_color;
                break;
            default:
                strength = "H";
                Lcolor = Mcolor = Hcolor = H_color;
                break;
        }
    }
    document.getElementById("strength_L").style.background = Lcolor;
    document.getElementById("strength_M").style.background = Mcolor;
    document.getElementById("strength_H").style.background = Hcolor;
    return strength;
}