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