To create a password meter using Javascript
We can see various type of password strength meter when we are registering on different types of websites. Here I will show you how to create a simple password strength meter using JavaScript and PHP.
There will be three steps:
1st create a html form:
{h1}Password strength meter{/h1}
{label for=”pass”}Password{/label}
{input type=”password” name=”pass” id=”pass” onkeyup=”passwordStrength(this.value)” /}
{label for=”passwordStrength”}Password strength{/label}
{div id=”passwordDescription”}Password not entered{/div}
{div id=”passwordStrength” class=”strength0″}{/div}
{/form}
the “< >” are replaced with “{ }” for convenience.
2nd Create a style sheet which will help us to show the strength meter in different colour:
{
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;
}
3rd and most important step that is to create the javascript code:
{ 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;}
Latest posts by rajat
- Creating a Simple pop-up with blocked background - August 30th, 2011
- Change drop-down list (options) values from database with ajax and php - August 9th, 2011
