Home >Web Front-end >JS Tutorial >Evaluate the strength of a user-entered password using Javascript
Passwords are already an indispensable tool in our lives and work, but an unsafe password may cause us unnecessary losses. As website designers, if we can conduct a security assessment on the password entered by the user on the web page and display the corresponding prompt information, it will be of great help to the user to set a secure password. At the same time, it also makes the website more user-friendly and attractive.
What is a secure password? This program evaluates in the following way.
1. If the password is less than 5 characters, then it is considered a Weak password.
2. If the password only consists of numbers, lowercase letters, uppercase letters or other special symbols, it is considered a weak password.
3. If the password consists of numbers, lowercase letters, uppercase letters or two of other special symbols, it is considered to be a moderately secure password.
4. If the password consists of more than three types of numbers, lowercase letters, uppercase letters or other special symbols, it is considered to be a moderately secure password. A relatively secure password.
This program will display different colors to indicate the strength of the password according to the password entered by the user. The specific program is as follows:
The following is a quotation fragment:
//CharMode function
//Test which category a character belongs to.
function CharMode(iN){
if (iN>=48 && iN <=57) //Number
return 1;
if (iN> ;=65 && iN <=90) //uppercase letters
return 2;
if (iN>=97 && iN <=122) //lowercase
return 4;
else
return 8; //special characters
}
//bitTotal function
//Calculate how many modes 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
//Return the strength level of the password
function checkStrong(sPW){
if (sPW. length<=4)
return 0; //The password is too short
Modes=0;
for (i=0;i
Modes|=CharMode(sPW.charCodeAt(i));
}
return bitTotal(Modes);
}
//pwStrength function
//When the user releases the keyboard or the password input box loses focus , display different colors according to different levels
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;
}
For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!