The result is as follows: enter the password:
Password strength:
The Code is as follows:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default. aspx. cs" Inherits = "_ Default" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
</Head>
<Mce: script language = "javascript" type = "text/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 = "# e0f0ff ";
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;
}
// --> </Mce: script>
Copy codeThe Code is as follows:
<Body>
<Form id = "form1" runat = "server">
<Div>
Enter Password: <asp: TextBox ID = "TextBox1" runat = "server" onKeyUp = pwStrength (this. value) onBlur = pwStrength (this. value)> </asp: TextBox> <br/>
Password strength:
<Table border = "1" cellpadding = "1" borderColorDark = "# fdfeff" borderColorLight = "#99 ccff" cellspacing = "1" style = "width: 200px; display: inline; background-color: # e0f0ff ">
<Tr>
<Td id = "strength_L" style = "width: 100px; height: 19px;" align = "center">
Weak </td>
<Td id = "strength_M" style = "width: 100px; height: 19px;" align = "center">
Medium </td>
<Td id = "strength_H" style = "width: 100px; height: 19px;" align = "center">
Strong </td>
</Tr>
</Table>
</Div>
</Form>
</Body>
</Html>
