判断及展示密码强度

charCodeAt()

<style>
        .pwd{40px;height:20px;line-height:14px;padding-top:2px;} 
        .pwd_f{color:#BBBBBB;} 
        .pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;} 
        .pwd_weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;} 
        .pwd_medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;} 
        .pwd_strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;} 
        .pwd_c_r{border-right:1px solid #D0D0D0;} 
        .pwd_weak_c_r{border-right:1px solid #BB2B2B;} 
        .pwd_medium_c_r{border-right:1px solid #E9AE10;} 
        .pwd_strong_c_r{border-right:1px solid #267A12;} 
    </style>
</head>
<body>
    <input name="password" type="password" onKeyUp="checkIntensity(this.value)"> 
    <table border="0" cellpadding="0" cellspacing="0"> 
      <tr align="center"> 
        <td id="pwd_weak" class="pwd pwd_c">&nbsp;</td> 
        <td id="pwd_medium" class="pwd pwd_c pwd_f">无</td> 
        <td id="pwd_strong" class="pwd pwd_c pwd_c_r">&nbsp;</td> 
      </tr> 
    </table> 
    <script>
        function checkIntensity(pwd){ 
          var mColor,wColor,sColor,color_html; 
          var m=0; 
          var modes=0; 
          for(i=0; i<pwd.length; i++){ 
            var charType=0; 
            var t=pwd.charCodeAt(i); 
            if(t>=48 && t <=57){charType=1;} 
            else if(t>=65 && t <=90){charType=2;} 
            else if(t>=97 && t <=122){charType=4;} 
            else{charType=4;} 
            modes |= charType; 
          } 
          for(i=0;i<4;i++){ 
          if(modes & 1){m++;} 
              modes>>>=1; 
          } 
          if(pwd.length<=4){m=1;} 
          if(pwd.length<=0){m=0;} 
          switch(m){ 
            case 1 : 
              wColor="pwd pwd_Weak_c"; 
              wColor="pwd pwd_c"; 
              sColor="pwd pwd_c pwd_c_r"; 
              color_html="弱"; 
            break; 
            case 2 : 
              wColor="pwd pwd_Medium_c"; 
              wColor="pwd pwd_Medium_c"; 
              sColor="pwd pwd_c pwd_c_r"; 
              color_html="中"; 
            break; 
            case 3 : 
              wColor="pwd pwd_Strong_c"; 
              wColor="pwd pwd_Strong_c"; 
              sColor="pwd pwd_Strong_c pwd_Strong_c_r"; 
              color_html="强"; 
            break; 
            default : 
              wColor="pwd pwd_c"; 
              wColor="pwd pwd_c pwd_f"; 
              sColor="pwd pwd_c pwd_c_r"; 
              color_hml="无"; 
            break; 
          } 
          document.getElementById('pwd_weak').className=wColor; 
          document.getElementById('pwd_medium').className=mColor; 
          document.getElementById('pwd_strong').className=sColor; 
          document.getElementById('pwd_medium').innerHTML=color_html; 
        } 
    </script>

展示效果如下：

码农随笔防失忆，只为记录风雨路上的脚丫印印~