密碼強度有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;  }  以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答