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="<?=$getRs[0]['contact_person_name']?>" />
<span id="passError"></span><span id="strendth"></span>
Working Output
For Very weak and weak
pass:- abcdef or abcdef123
for better pass:-abcdef12345
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="<?=$getRs[0]['contact_person_name']?>" />
<span id="passError"></span><span id="strendth"></span>
Working Output
For Very weak and weak
pass:- abcdef or abcdef123
for better pass:-abcdef12345