注冊時的密碼強度

密碼強度有4個狀態，分別如下圖。

無密碼狀態

密碼低級狀態

密碼中級狀態

密碼高級狀態

實現的代碼主要如下：

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"> </td>
 <td id="pwd_Medium" class="pwd pwd_c pwd_f">無</td>
 <td id="pwd_Strong" class="pwd pwd_c pwd_c_r"> </td>
 </tr>
</table> 
         

CSS代碼

.pwd{width:50px;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;}

JS代碼

function CheckIntensity(pwd) {
        var Mcolor, Wcolor, Scolor, Color_Html;       
        var m = 0;      
        //匹配數字
        if (/\d+/.test(pwd)) {
            debugger;
            m++;
        };
        //匹配字母
        if (/[A-Za-z]+/.test(pwd)) {         
            m++;
        };
        //匹配除數字字母外的特殊符號
        if (/[^0-9a-zA-Z]+/.test(pwd)) {            
            m++;
        };
       
        if (pwd.length <= 6) { 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;
    }