Websolutionstuff

How To Check Password Strength Using JQuery

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.

Read Also : How Generate PDF From HTML View In Laravel

<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.

How To Check Password Strength Using JQuery

Read More : How To Validate Password And Confirm Password Using JQuery

Thanks for reading 🙏 !!

We are highly appreciated if you “LIKE ❤️”, “SHARE” and “CLAPS 👏”.

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API.