Regular expression offers an extremely powerful way of validation for forms password.
I guess your regular expression should look like:
<form id="register">
<label for="password">Password:</label>
<input name="password" id="password" type="password"/>
<span id="result"></span>
</form>
Here is some javascript/jquery code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#password').keyup(function(){
$('#result').html(checkStrength($('#password').val()))
});
function checkStrength(password)
{
//initial strength
var strength1 = 0;
var strength2 = 0;
var strength3 = 0;
var strength4 = 0;
//length is ok, lets continue.
//if length is 8 characters or more, increase strength value
if (password.length < 8) strength1 = 1;
//if password contains both lower and uppercase characters, increase strength value
if (!password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength2 = 1;
//if it has numbers and characters, increase strength value
if (!password.match(/([0-9])/)) strength3 = 1;
//if it has one special character, increase strength value
if (!password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength4 += 1
//if it has two special characters, increase strength value
//if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,",%,&,@,#,$,^,*,?,_,~])/)) strength += 1
//now we have calculated strength value, we can return messages
//if value is less than 2
if(strength1==1)
{
$('#result').text('Password too short.');
} else if(strength2==1) {
$('#result').text('Please used upper & lower case letter.');
} else if(strength3==1) {
$('#result').text('Please used number.');
} else if(strength4==1) {
$('#result').text('Please used any special character.');
} else {
$('#result').text('Strong!');
}
}
});
</script>
Enjoy!
