<table>
<tr>
                <td style="width: 201px; height: 22px;" valign="middle" align="right">
                    登录密码：<b><font color="red">*</font></b>
                </td>
                <td align="left" style="height: 22px">
                    <input name="txtregistpwd1" type="password" id="txtregistpwd1" class="wenbenkuang" onkeypress="pwStrength(this.value);" maxlength="20" />
    </td>
  </tr>
             <tr>
                <td style="width: 201px; height: 22px;" valign="middle" align="right" >
                     密码强弱：&nbsp;
                </td>
                <td align="left">
                   <span id="strength_L"  style="width:40px;display:block;float:left; background:#cccccc;">弱</span>
                   <span id="strength_M" style="width:40px;display:block;float:left; background:#cccccc;">中</span>
                   <span id="strength_H" style="width:40px;display:block;float:left; background:#cccccc;">强</span>
               </td>
            </tr>
</table>

// JavaScript Document
// 测试某个字符是属于哪一类
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 = "#cccccc";
   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 = O_color;
            Mcolor = M_color;
            Hcolor = O_color;
            break;
         default :
            Lcolor = O_color;
            Mcolor = O_color;
            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;
}

• javascript