June 21, 2015

jquery password validation with at least 8 characters, 1 number, 1 upper and 1 lowercase.


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!

No comments:

Post a Comment

Integrating Google reCAPTCHA v3 in HTML Form with PHP

  What is Google reCAPTCHA v3? Google reCAPTCHA is a free service that helps protect websites from spam and abuse. reCAPTCHA v3 is the lates...