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