JS user password security strength determination

Judging the password entered by the user and then telling the user the strength of the password is a good user experience design, which can improve the security of the user's password and make the user feel confident in the website. Below is a simple JavaScript program that determines the strength of a user's password.

Effect demonstration

enter password:
password strength:	weak middle powerful
Tips:	Passwords must be at least 4 characters long and preferably contain numbers, letters (both upper and lower case) and special symbols.

analyze

Passwords are already an indispensable tool in our life and work, but an insecure password may cause us unnecessary losses. As a website designer, if we can conduct security assessment on the password entered by the user in the web page and display the corresponding prompt information, it will be of great help for the user to set a secure password. It also makes the website more user-friendly and attractive.

What is a secure password? This program is evaluated in the following manner.

• If the password is less than 5 digits, then it is considered a weak password.
• A password is considered weak if it consists of only one of numbers, lowercase letters, uppercase letters, or other special symbols.
• A password is considered a moderately secure password if it consists of two of numbers, lowercase letters, uppercase letters, or other special symbols.
• If the password consists of more than three of numbers, lowercase letters, uppercase letters or other special symbols, it is considered a relatively secure password.

code

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language=javascript>
//CharMode function
//Test which class a character belongs to.
function CharMode(iN)
{
	if (iN>=48 && iN <=57) //数字
		return 1;
	if (iN>=65 && iN <=90) //capital letters
		return 2;
	if (iN>=97 && iN <=122) //小写
		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; //password 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.www.qichepeijian.com
//When the user releases the keyboard or the password input box loses focus, different colors are displayed 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;
}
</script>
<form name="form1" action="" >
<table width="400" border="0">
  <tr>
    <td width="25%">Enter password:</td>
    <td width="75%"><input type="password" size="40" onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)"> </td>
  </tr>
  <tr>
    <td>Password Strength:</td>
    <td>
<table width="300" border="1" bordercolor="#cccccc" height="23">
	<tr bgcolor="#eeeeee">
		<td width="100" id="strength_L">弱</td>
		<td width="100" id="strength_M">中</td>
		<td width="100" id="strength_H">强</td>
	</tr>
</table>
    </td>
  </tr>
  <tr>
    <td>Warm reminder:</td>
    <td>Passwords must be at least 4 characters long and preferably contain numbers, letters (both upper and lower case) and special symbols. </td>
  </tr>
</table>
</form>