Password strength at registration and password strength at registration

Password strength at registration and password strength at registration

The password strength has four statuses, such.

Password-free status

Low password status

Password intermediate status

Advanced password status

The implementation code is as follows:

HTML code

<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"> none </td>
<Td id = "pwd_Strong" class = "pwd pwd_c pwd_c_r"> </td>
</Tr>
</Table>

CSS code

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

Function CheckIntensity (pwd) {var Mcolor, Wcolor, Scolor, Color_Html; var m = 0; // match the number if (/\ d + /. test (pwd) {debugger; m ++;}; // match the letter if (/[A-Za-z] + /. test (pwd) {m ++ ;}; // match the special character if (/[^ 0-9a-zA-Z] +/Except for numbers and letters /. 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 = "weak"; break; case 2: Wcolor = "pwd pwd_Medium_c"; Mcolor = "pwd pwd_Medium_c "; scolor = "pwd pwd_c pwd_c_r"; Color_Html = "medium"; break; case 3: Wcolor = "pwd pwd_Strong_c"; Mcolor = "pwd pwd_Strong_c "; scolor = "pwd pwd_Strong_c pwd_Strong_c_r"; Color_Html = "strong"; break; default: Wcolor = "pwd pwd_c"; Mcolor = "pwd pwd_c pwd_f "; scolor = "pwd pwd_c pwd_c_r"; Color_Html = "NONE"; 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 ;}