jQuery Password Strength Checker

by Vincy. Last modified on August 11th, 2022.

In this tutorial, we are going to validate password strength using jQuery. We have regex patterns for alphabets numbers and special characters. Password text will be matched with this pattern. Then, its strength will be validated based on the type of characters it contains.

View Demo

Password Strength Checking Form

This form interface is used to enter our password to be checked for validating its strength.

<div class="phppot-container tile-container">
    <h2 class="text-center">Password Strength Checker</h2>
    <form>
        <div class="row">
            <label>Password:</label> <input type="password"
                name="password" id="password" class="full-width"
                onkeyup="checkPasswordStrength();" />
        </div>
        <div id="password-strength-status"></div>
    </form>
</div>

jQuery Function to Check Password Strength

This function will be called on the key-up event of the password field. This function checks the length of the password text. If it is less than 6 characters, then it will be validated as the weak password.

password week medium strength response

If not, the password will be matched with the regex patterns. If the password contains at least one alphabet, one number, and one special character then it will be considered as the strong password.

function checkPasswordStrength() {
	var number = /([0-9])/;
	var alphabets = /([a-zA-Z])/;
	var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
	var password = $('#password').val().trim();
	if (password.length < 6) {
		$('#password-strength-status').removeClass();
		$('#password-strength-status').addClass('weak-password');
		$('#password-strength-status').html("Weak (should be atleast 6 characters.)");
	} else {
		if (password.match(number) && password.match(alphabets) && password.match(special_characters)) {
			$('#password-strength-status').removeClass();
			$('#password-strength-status').addClass('strong-password');
			$('#password-strength-status').html("Strong");
		}
		else {
			$('#password-strength-status').removeClass();
			$('#password-strength-status').addClass('medium-password');
			$('#password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
		}
	}
}

View DemoDownload

Vincy
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

↑ Back to Top

Share this page