How to Create Password Strength Checker With Javascript

When you want to sign up in a website, you have to fill a registration form of the website. Many website has a feature which shows the password strength of your password which you are going to use for your website account. It seems nice and helps us in selecting a strong password. If you also want to implement that for your website, it is easy to implement it with the simple javascript code. In this tutorial, we will see how to create password strength check in Javascript.

First of all create a javascript function which dynamically checks your password strength.

function checkPasswordStrength(pwd)
{
var strength_text = document.getElementById('strength_text');
var strength_id = document.getElementById('strength_id');
var progress_bar = document.getElementById('progress_bar');

var strong = new RegExp('^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$', 'g');
var medium = new RegExp('^(?=.{6,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$', 'g');
var enough = new RegExp('(?=.{6,}).*', 'g');

if (strength_text == null)
{
return;
}

strength_id.value = 0;

var width = pwd.length * 10;

if (pwd.length == 0)
{
strength_text.innerHTML = ' ';
progress_bar.style.backgroundColor = '#FFFFFF';
}
else if (false == enough.test(pwd))
{
strength_text.innerHTML = 'Too short';
progress_bar.style.backgroundColor = '#DC143C';
}
else if (strong.test(pwd))
{
strength_text.innerHTML = 'Strong';
width = 100;
progress_bar.style.backgroundColor = '#228B22';
strength_id.value = 3;
}
else if (medium.test(pwd))
{
strength_text.innerHTML = 'Medium';
width = 70;
progress_bar.style.backgroundColor = '#FF8C30';
strength_id.value = 2;
}
else
{
width = 60;
strength_text.innerHTML = 'Weak';
progress_bar.style.backgroundColor = '#FFD700';
strength_id.value = 1;
}

progress_bar.style.width = width + '%';

document.getElementById('password_strength').style.display = (pwd.length == 0)?'none':'';
}

After creating the function, you need to have a html form where we use this function to show password strength. HTML

<form name="form" action="" method="post">
<div style="padding:100px 0px  50px 10px;">
Password : <input type="password" name="user_pwd" id="user_pwd" onkeyup="checkPasswordStrength(this.value)" style="width: 130px; border: #BBBBBB 1px solid;" />

<!-- Start: Password strength display area-->
<div id="password_strength" style="display: none; margin-top: 5px; margin-left:70px;">
<div style="width: 130px; border: #CCCCCC 1px solid;">
    <div id="progress_bar" style="height: 5px; border: #FFFFFF 0px solid; font-size: 1px; background-color: #FFD700;"></div>
    </div>
    <span id="strength_text" style="font-family: Arial; font-size: 10px; color: #888888;">Weak</span>
    <input type="hidden" name="strength_id" id="strength_id" value="1" />
</div>
<!-- End: Password strength display area-->

</div>
</form>

Use this script and enjoy. In case of any problem, comment below.