Tuesday, August 31, 2010

Javascript function to check Password Strength

There is few line of code for check strength at client side with the help of Javascript and CSS.

In this code JS function will check the combination of password by found simple character and numeric character and special character.  and Check length of password it should be more or equal of 6.

Password with simple only character or number will week and with combination of character and number will medium and with character and number and special character is strong.

Css Code 
.strength0
{
width:250px;
background:#cccccc;
}

.strength1
{
width:50px;
background:#ff0000;
}

.strength2
{
width:100px;
background:#ff5f5f;
}

.strength3
{
width:150px;
background:#56e500;
}

.strength4
{
background:#4dcd00;
width:200px;
}

.strength5
{
background:#399800;
width:250px;
}

Javascript Function Code

function passwordStrength(password,passwordStrength,errorField)
{
var desc = new Array();
desc[0] = "Very Weak";
desc[1] = "Weak";
desc[2] = "Better";
desc[3] = "Medium";
desc[4] = "Strong";
desc[5] = "Strongest";

var score   = 0;

//if password bigger than 6 give 1 point
if (password.length > 6) score++;

//if password has both lower and uppercase characters give 1 point
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;

//if password has at least one number give 1 point
if (password.match(/\d+/)) score++;

//if password has at least one special caracther give 1 point
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;

//if password bigger than 12 give another 1 point
if (password.length > 12) score++;

passwordStrength.innerHTML = desc[score];
passwordStrength.className = "strength" + score;
}



Html Code of Use it



<input id="password" name="password" onblur="passwordStrength(this.value,document.getElementById('strendth'),document.getElementById('passError'))" size="40" type="password" value="&lt;?=$getRs[0]['contact_person_name']?&gt;" />
<span id="passError"></span><span id="strendth"></span>

Working Output 


For Very weak and weak


pass:- abcdef or abcdef123


for better pass:-abcdef12345


for strong 



No comments:

Post a Comment