Password Strength Checker jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Password Strength Checker jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
#passwordTest {
width: 400px;
background: #F0F0F0;
padding: 20px;
border: 1px solid #DDD;
border-radius: 4px;
}
#passwordTest input[type="password"]{
width: 97.5%;
height: 25px;
margin-bottom: 5px;
border: 1px solid #DDD;
border-radius: 4px;
line-height: 25px;
padding-left: 5px;
font-size: 25px;
color: #829CBD;
}
#pass-info{
width: 97.5%;
height: 25px;
border: 1px solid #DDD;
border-radius: 4px;
color: #829CBD;
text-align: center;
font: 12px/25px Arial, Helvetica, sans-serif;
}
#pass-info.weakpass{
border: 1px solid #FF9191;
background: #FFC7C7;
color: #94546E;
text-shadow: 1px 1px 1px #FFF;
}
#pass-info.stillweakpass {
border: 1px solid #FBB;
background: #FDD;
color: #945870;
text-shadow: 1px 1px 1px #FFF;
}
#pass-info.goodpass {
border: 1px solid #C4EEC8;
background: #E4FFE4;
color: #51926E;
text-shadow: 1px 1px 1px #FFF;
}
#pass-info.strongpass {
border: 1px solid #6ED66E;
background: #79F079;
color: #348F34;
text-shadow: 1px 1px 1px #FFF;
}
#pass-info.vrystrongpass {
border: 1px solid #379137;
background: #48B448;
color: #CDFFCD;
text-shadow: 1px 1px 1px #296429;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var password1 = $('#password1'); //id of first password field
var password2 = $('#password2'); //id of second password field
var passwordsInfo = $('#pass-info'); //id of indicator element
passwordStrengthCheck(password1,password2,passwordsInfo); //call password check function
});
function passwordStrengthCheck(password1, password2, passwordsInfo)
{
//Must contain 5 characters or more
var WeakPass = /(?=.{5,}).*/;
//Must contain lower case letters and at least one digit.
var MediumPass = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/;
//Must contain at least one upper case letter, one lower case letter and one digit.
var StrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/;
//Must contain at least one upper case letter, one lower case letter and one digit.
var VryStrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{5,}$/;
$(password1).on('keyup', function(e) {
if(VryStrongPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('vrystrongpass').html("Very Strong! (Awesome, please don't forget your pass now!)");
}
else if(StrongPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('strongpass').html("Strong! (Enter special chars to make even stronger");
}
else if(MediumPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('goodpass').html("Good! (Enter uppercase letter to make strong)");
}
else if(WeakPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('stillweakpass').html("Still Weak! (Enter digits to make good password)");
}
else
{
passwordsInfo.removeClass().addClass('weakpass').html("Very Weak! (Must be 5 or more chars)");
}
});
$(password2).on('keyup', function(e) {
if(password1.val() !== password2.val())
{
passwordsInfo.removeClass().addClass('weakpass').html("Passwords do not match!");
}else{
passwordsInfo.removeClass().addClass('goodpass').html("Passwords match!");
}
});
}
</script>
<h2>Password Strength Checker jQuery</h2>
<form action="" method="post" id="passwordTest">
<div><input type="password" id="password1" /></div>
<div><input type="password" id="password2" /></div>
<div id="pass-info"></div>
</form>
</body>
</html>
VIDEO
Password Strength Checker jQuery
