Javascript
Passwords are an essential tool in our life and work, but an unsafe password may cause unnecessary loss. As a web designer, if we can make a security assessment of the password entered by the user in the Web page and display the corresponding prompts, it will be helpful to set a secure password for the user. At the same time make the site more humane, more attractive.
What is a secure password? This procedure is evaluated in the following manner.
1. If the password is less than 5 digits, it is considered a weak password.
2. If the password is made up of only one of the numbers, lowercase letters, capitals, or other special symbols, it is considered a weak password.
3. If the password is composed of numbers, lowercase letters, capitals, or other special symbols, it is considered to be a moderate security password.
4. If the password consists of more than three of the numbers, lowercase letters, capitals, or other special symbols, it is considered a safe password.
This program will be based on the user entered the password to display different colors to indicate the strength of the password, the specific procedures are as follows:
<script language=javascript>
Charmode function
Test what kind of character it belongs to.
function Charmode (in) {
if (in>=48 && in <=57)//number
return 1;
if (in>=65 && in <=90)//Uppercase
return 2;
if (in>=97 && in <=122)//lowercase
return 4;
Else
return 8; Special characters
}
Bittotal function
Calculates how many patterns there are 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
Returns the strength level of a password
function Checkstrong (SPW) {
if (spw.length<=4)
return 0; Password is too short
modes=0;
for (i=0;i<spw.length;i++) {
Test the category of each character and count how many patterns there are.
Modes|=charmode (Spw.charcodeat (i));
}
Return Bittotal (Modes);
}
Pwstrength function
Displays different colors at different levels when the user releases the keyboard or password input box from losing focus
function Pwstrength (pwd) {
O_color= "#eeeeee";
L_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 Password: <input type=password size=10 onkeyup=pwstrength (this.value) onblur=pwstrength (this.value) >
<br> Password Strength:
<table width= "217" border= "1" cellspacing= "0" cellpadding= "1" bordercolor= "#cccccc" height= "" style= ' Display: Inline ' >
<TR align= "center" bgcolor= "#eeeeee" >
<TD width= "33%" id= "strength_l" > Weak </td>
<TD width= "33%" id= "Strength_m" > </td>
<TD width= "33%" id= "Strength_h" > Strong </td>
</tr>
</table>
</form>