原生JS判斷密碼強弱

前些天工作中有這個需求，自己手寫了相關的JS代碼，第一種方法是通過ASCII 碼判斷密碼類型，完成用戶注冊時判斷用戶輸入密碼的強度，分強、弱、中三等級，它可以根據用戶輸入的密碼顯示對應的密碼強弱等級，方便用戶改進輸入，第二種方法是通過JS正則來判斷用戶輸入的密碼強弱。下面分別對這兩種方法進行展示。

方法一：

html代碼：

<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> 

css代碼：

    <style type="text/css">
        .pwd{width: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>

到關鍵了！JS判斷：

<script type="text/javascript">
     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;} //為0～9十個阿拉伯數字
         else if(t>=65 && t <=90){charType=2;} //為26個大寫英文字母
          else if(t>=97 && t <=122){charType=4;} //為26個小寫英文字母
          else{charType=4;} 
          Modes |= charType; 
        } 
        //計算密碼模式 
        for(i=0;i<4;i++){ 
        if(Modes & 1){m++;alert(m)}
            Modes>>>=1;
        } 
        if(pwd.length<=4){m=1;} 
        if(pwd.length<=0){m=0;} 
        //返回強度級別
        switch(m){ 
          case 1 : 
            Wcolor="pwd pwd_Weak_c"; 
            Mcolor="pwd pwd_c"; 
            Scolor="pwd pwd_c pwd_c_r"; 
            Color_Html="弱"; 

          break; 
          case 2 : 
            Wcolor="pwd pwd_Medium_c"; 
            Mcolor="pwd pwd_Medium_c"; 
            Scolor="pwd pwd_c pwd_c_r"; 
            Color_Html="中"; 

          break; 
          case 3 : 
            Wcolor="pwd pwd_Strong_c"; 
            Mcolor="pwd pwd_Strong_c"; 
            Scolor="pwd pwd_Strong_c pwd_Strong_c_r"; 
            Color_Html="強"; 

          break; 
          default : 
            Wcolor="pwd pwd_c"; 
            Mcolor="pwd pwd_c pwd_f"; 
            Scolor="pwd pwd_c pwd_c_r"; 
            Color_Html="無"; 
          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>

方法二：

 

<script>
function AuthPasswd(string) {
    if(string.length >=6) {
        if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && /\W+\D+/.test(string)) {
            noticeAssign(1);
        }else if(/[a-zA-Z]+/.test(string) || /[0-9]+/.test(string) || /\W+\D+/.test(string)) {
            if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string)) {
                noticeAssign(-1);
            }else if(/\[a-zA-Z]+/.test(string) && /\W+\D+/.test(string)) {
                noticeAssign(-1);
            }else if(/[0-9]+/.test(string) && /\W+\D+/.test(string)) {
                noticeAssign(-1);
            }else{
                noticeAssign(0);
            }
        }
    }else{
        noticeAssign(null); 
    }
}
 
function noticeAssign(num) {
    if(num == 1) {
        $('#weak').css({backgroundColor:'#009900'});
        $('#middle').css({backgroundColor:'#009900'});
        $('#strength').css({backgroundColor:'#009900'});
        $('#strength').html('很強');
        $('#middle').html('');
        $('#weak').html('');
    }else if(num == -1){
        $('#weak').css({backgroundColor:'#ffcc33'});
        $('#middle').css({backgroundColor:'#ffcc33'});
        $('#strength').css({backgroundColor:''});
        $('#weak').html('');
        $('#middle').html('中');
        $('#strength').html('');
    }else if(num ==0) {
        $('#weak').css({backgroundColor:'#dd0000'});
        $('#middle').css({backgroundColor:''});
        $('#strength').css({backgroundColor:''});
        $('#weak').html('弱');
        $('#middle').html('');
        $('#strength').html('');
    }else{
        $('#weak').html('&nbsp;');
        $('#middle').html('&nbsp;');
        $('#strength').html('&nbsp;');
        $('#weak').css({backgroundColor:''});
        $('#middle').css({backgroundColor:''});
        $('#strength').css({backgroundColor:''});
    }
}
</script>