Password Strength Meter

This is an example of a password strenght meter.. It’s very simple and easy to use…

JavaScript Code:

function passwordStrength(password)
{        
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++;
 document.getElementById("passwordDescription").innerHTML = desc[score];
 document.getElementById("passwordStrength").className = "strength" + score;
}

CSS Code:

#passwordStrength
{
        height:10px;
        display:block;
        float:left;
}

.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;
}

HTML Use:

<label for="pass">Password</label>
<input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)" />
<p>
      <label for="passwordStrength">Password strength</label>
      <div id="passwordDescription">Password not entered</div>
      <div id="passwordStrength" class="strength0"></div>
</p>

In some cases, the onkeyup won’t work.. I use: onkeypress…
Later…

Original Source:

How to make a password strength meter for your register form

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s