How To Check Password Strength Using JQuery
2 min readJan 27, 2021
In this post I will show you how to check password strength using jQuery, here I will check whether password strength is fulfill min character requirement or not.
I will give you example how to check password size using javascript and jQuery password strength. password is most important part of authentication many times you can see error message like enter valid password or password must be at least 6 character etc. So, here we are check password using jquery.
<html>
<body>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>How to check password strength in jQuery - websolutionstuff.com</title>
<style>
#password-strength-status {
padding: 5px 10px;
color: #FFFFFF;
border-radius: 4px;
margin-top: 5px;
} .medium-password {
background-color: #b7d60a;
border: #BBB418 1px solid;
} .weak-password {
background-color: #ce1d14;
border: #AA4502 1px solid;
} .strong-password {
background-color: #12CC1A;
border: #0FA015 1px solid;
}
</style>
</head>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>How to check password strength in jQuery - websolutionstuff.com</h2><br/>
<label>Password:</label>
<input type="password" name="password" id="password" class="form-control"/>
<div id="password-strength-status"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$("#password").on('keyup', function(){
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
if ($('#password').val().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').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().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 or some combination.)");
}
}
});
});
</script>
And finally you will get output like below screen print.
Read More : How To Validate Password And Confirm Password Using JQuery
Thanks for reading 🙏 !!
We are highly appreciated if you “LIKE ❤️”, “SHARE” and “CLAPS 👏”.
