How to Create a Password Strength Checker with jQuery?

Estimated read time 3 min read

Here’s an example of how to create a Password Strength Checker with jQuery:

HTML code:

<!DOCTYPE html>
<html>
<head>
	<title>Password Strength Checker with jQuery</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
		#password-strength {
			width:200px;
			height:10px;
			background-color:#eee;
			position:relative;
			margin-top:20px;
			display:none;
		}
		
		#password-strength-bar {
			background-color:#007bff;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			width:0;
			transition:width 0.5s;
		}
		
		#password-strength-label {
			margin-top:10px;
			display:none;
		}
	</style>
</head>
<body>
	<label for="password-input">Password:</label>
	<input type="password" id="password-input">
	
	<div id="password-strength">
		<div id="password-strength-bar"></div>
	</div>
	
	<div id="password-strength-label">
		<p>Password strength:</p>
		<span></span>
	</div>
	
	<script>
		$(document).ready(function(){
			var passwordInput = $("#password-input");
			var strengthBar = $("#password-strength-bar");
			var strengthLabel = $("#password-strength-label");
			var strengthText = strengthLabel.find("span");
			var weakColor = "#dc3545";
			var fairColor = "#ffc107";
			var strongColor = "#28a745";
			
			passwordInput.on("input", function(){
				var password = passwordInput.val();
				var passwordLength = password.length;
				var strength = 0;
				
				if(passwordLength < 8){
					strengthBar.css("background-color", weakColor);
					strength = 0;
					strengthText.text("Weak");
				}
				else if(passwordLength >= 8 && passwordLength < 12){
					strengthBar.css("background-color", fairColor);
					strength = 1;
					strengthText.text("Fair");
				}
				else if(passwordLength >= 12){
					strengthBar.css("background-color", strongColor);
					strength = 2;
					strengthText.text("Strong");
				}
				
				strengthBar.width((strength + 1) * 33.33 + "%");
				passwordLength > 0 ? $("#password-strength").show() : $("#password-strength").hide();
				passwordLength > 0 ? strengthLabel.show() : strengthLabel.hide();
			});
		});
	</script>
</body>
</html>

In this example, we have a label element and an input element with the ID “password-input”. We also have a div element with the ID “password-strength” that contains another div element with the ID “password-strength-bar”. This is our password strength indicator element.

We also have a div element with the ID “password-strength-label” that contains a p element and a span element. The span element will display the strength level of the password.

In the script, we define variables for the passwordInput, strengthBar, strengthLabel, and strengthText elements using the $() syntax. We also define variables for the colors we will use to indicate password strength.

We use the on() method to listen for input events on the passwordInput element. When the user types in a password, we

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply