Password Strength checker is very useful when we have to implement registration on the website. Because most of the time user does not focus on choosing a strong password which leads to poor security and sometimes data gets hacked. For making passwords strong in registration we advise choosing a strong password for better security.
In this tutorial, we will validate password strength using jQuery. We have regex patterns of special characters and alphabets to check the strength of the password.
jQuery Function to Check Password Strength
Javascript function will be called onKeyUp=”checkPasswordStrength() event when entered input. It validates the length of the input text, If it is less than 6 characters, then it will be termed as a weak password. If not, then the password will be matched with the regex patterns. If the password contains at least one number, one alphabet, and one special character then it will be considered as a strong password.
<!Doctype html>
<html>
<body>
<head>
<style>
#frmPasswordcheck {
border-top: #F0F0F0 2px solid;
background: #808080;
padding: 10px;
}
.InputBox {
padding: 7px;
border: #F0F0F0 1px solid;
border-radius: 4px;
}
#password-strength {
padding: 5px 10px;
color: #FFFFFF;
border-radius: 4px;
margin-top: 5px;
}
.medium-pass {
background-color: #b7d60a;
border: #BBB418 1px solid;
}
.weak-pass {
background-color: #ce1d14;
border: #AA4502 1px solid;
}
.strong-pass {
background-color: #12CC1A;
border: #0FA015 1px solid;
}
</style>
</head>
<div name="frmPasswordcheck" id="frmPasswordcheck" style='text-align: center;'>
<label>Password:</label>
<input type="password" name="password" id="password" class="InputBox" onKeyUp="checkPasswordStrength();" />
<div id="password-strength"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function checkPasswordStrength() {
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
if ($('#password').val().length < 6) {
$('#password-strength').removeClass();
$('#password-strength').addClass('weak-pass');
$('#password-strength').html("Weak (should be atleast 6 characters.)");
} else {
if ($('#password').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().match(special_characters)) {
$('#password-strength').removeClass();
$('#password-strength').addClass('strong-pass');
$('#password-strength').html("Strong");
} else {
$('#password-strength').removeClass();
$('#password-strength').addClass('medium-pass');
$('#password-strength').html("Medium (should include alphabets, numbers and special characters.)");
}
}
}
</script>
</body>
</html>
