<Script language = javascript>
// CharMode Function
// Test the category of a character
Function CharMode (iN ){
If (iN> = 48 & iN <= 57) // number
Return 1;
If (iN> = 65 & iN <= 90) // uppercase letter
Return 2;
If (iN> = 97 & iN <= 122) // lower case
Return 4;
Else
Return 8; // special characters
}
// BitTotal Function
// Calculate the total number of modes in the current password
Function bitTotal (num ){
Modes = 0;
For (I = 0; I <4; I ++ ){
If (num & 1) modes ++;
Num >>>= 1;
}
Return modes;
}
// CheckStrong Function
// Return the password strength level
Function checkStrong (sPW ){
If (sPW. length <= 4)
Return 0; // The password is too short
Modes = 0;
For (I = 0; I <sPW. length; I ++ ){
// Test the category of each character and calculate the total number of Modes
Modes | = CharMode (sPW. charCodeAt (I ));
}
Return bitTotal (Modes );
}
// PwStrength Function
// When the user releases the keyboard or loses the focus in the password input box, different colors are displayed based on different levels
Function pwStrength (pwd ){
O_color = "# eeeeee ";
Rochelle color = "# FF0000 ";
M_color = "# FF9900 ";
H_color = "#33CC00 ";
If (pwd = null | pwd = ){
Lcolor = Mcolor = Hcolor = O_color;
}
Else {
S_level = checkStrong (pwd );
Switch (S_level ){
Case 0:
Lcolor = Mcolor = Hcolor = O_color;
Case 1:
Lcolor = L_color;
Mcolor = Hcolor = O_color;
Break;
Case 2:
Lcolor = Mcolor = M_color;
Hcolor = O_color;
Break;
Default:
Lcolor = Mcolor = Hcolor = H_color;
}
}
Document. getElementById ("strength_L"). style. background = Lcolor;
Document. getElementById ("strength_M"). style. background = Mcolor;
Document. getElementById ("strength_H"). style. background = Hcolor;
Return;
}
</Script>
<Form name = "form1" action = "">
Enter the password: <input type = "password" size = "20" onKeyUp = "pwStrength (this. value)" onBlur = "pwStrength (this. value)"/>
<Br> password strength:
<Table width = "200px" height = "25" border = "0" cellspacing = "0" cellpadding = "1" bordercolor = "# cccccc" style = font-size: 12px>
<Tr align = "center" bgcolor = "# eeeeee">
<Td width = "33%" id = "strength_L"> weak </td>
<Td width = "33%" id = "strength_M"> medium </td>
<Td width = "33%" id = "strength_H"> strong </td>
</Tr>
</Table>
</Form>