you can create password strength meter using php and jquery with following code:
JQuery:
$(document).ready(function() {
var password1 = $('#password1'); //id of first password field
var password2 = $('#password2'); //id of second password field
var passwordsInfo = $('#pass-info'); //id of indicator element
Passwordmeter(password1,password2,passwordsInfo); //call password check function
});
function Passwordmeter(password1, password2, passwordsInfo)
{
//Must contain 5 characters or more
var WeakPass = /(?=.{8,}).*/;
//Must contain lower case letters and at least one digit.
var MediumPass = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{8,}$/;
//Must contain at least one upper case letter, one lower case letter and one digit.
var StrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{8,}$/;
//Must contain at least one upper case letter, one lower case letter and one digit.
var VryStrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{8,}$/;
$(password1).keypress(function(e) {
if(VryStrongPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('vrystrongpass').html("Very Strong! (Awesome, please don't forget your pass now!)");
}
else if(StrongPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('strongpass').html("Strong! (Enter special chars to make even stronger");
}
else if(MediumPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('goodpass').html("Good! (Enter uppercase letter to make strong)");
}
else if(WeakPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('stillweakpass').html("Still Weak! (Enter digits to make good password)");
}
else
{
passwordsInfo.removeClass().addClass('weakpass').html("Very Weak! (Must be 8 or more chars)");
}
});
$(password2).keypress(function(e) {
if(password1.val() !== password2.val())
{
passwordsInfo.removeClass().addClass('weakpass').html("Passwords do not match!");
}else{
passwordsInfo.removeClass().addClass('goodpass').html("Passwords match!");
}
});
}
HTML
<form action="" method="post" id="passwordmeter">
<div><input type="password" id="password1" /></div>
<div><input type="password" id="password2" /></div>
<div id="pass-info"></div>
JQuery:
$(document).ready(function() {
var password1 = $('#password1'); //id of first password field
var password2 = $('#password2'); //id of second password field
var passwordsInfo = $('#pass-info'); //id of indicator element
Passwordmeter(password1,password2,passwordsInfo); //call password check function
});
function Passwordmeter(password1, password2, passwordsInfo)
{
//Must contain 5 characters or more
var WeakPass = /(?=.{8,}).*/;
//Must contain lower case letters and at least one digit.
var MediumPass = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{8,}$/;
//Must contain at least one upper case letter, one lower case letter and one digit.
var StrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{8,}$/;
//Must contain at least one upper case letter, one lower case letter and one digit.
var VryStrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{8,}$/;
$(password1).keypress(function(e) {
if(VryStrongPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('vrystrongpass').html("Very Strong! (Awesome, please don't forget your pass now!)");
}
else if(StrongPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('strongpass').html("Strong! (Enter special chars to make even stronger");
}
else if(MediumPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('goodpass').html("Good! (Enter uppercase letter to make strong)");
}
else if(WeakPass.test(password1.val()))
{
passwordsInfo.removeClass().addClass('stillweakpass').html("Still Weak! (Enter digits to make good password)");
}
else
{
passwordsInfo.removeClass().addClass('weakpass').html("Very Weak! (Must be 8 or more chars)");
}
});
$(password2).keypress(function(e) {
if(password1.val() !== password2.val())
{
passwordsInfo.removeClass().addClass('weakpass').html("Passwords do not match!");
}else{
passwordsInfo.removeClass().addClass('goodpass').html("Passwords match!");
}
});
}
HTML
<form action="" method="post" id="passwordmeter">
<div><input type="password" id="password1" /></div>
<div><input type="password" id="password2" /></div>
<div id="pass-info"></div>
No comments :
Post a Comment