Check Password strength using javascript

Sep 27, 2013, by admin

Password strength checker meter is simple way of showing the strength of password. It checks for password length and the strength with various colored meter.

This is very helpful when the general users use just a simple text or numbers for password and they get easily hacked.

The javascript code:

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’:”;
}

The html code:

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

Hope this post help you to get more updates like the page Bugtreat Technologies