Password strength checker using javascript

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 screenshots from the Demo:

Password strength checker Password strength checker Password strength checker Password strength checker


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>

View Demo Download

Be Sociable, Share!
You can leave a response, or trackback from your own site.

One Response to “Password strength checker using javascript”

  1. Meosys says:

    Another example of a password strength checker. This is a google like server side implementation built on dojo http://www.meosys.com/WEB/webdemo.iface

Leave a Reply

CommentLuv badge
 

Powered by WordPress