Password strength checking is an easy way to show the strength of user password on the registration forms. It helps users to choose more secure password when filling the forms.

In this tutorial we will build a basic form field that provides live feedback to the users about the password strength. The basic idea is to evaluate the password string every time a user enters a character. We will check the password strength using a few regular expressions with jQuery.

Markup for the form:

Here is the basic HTML markup for the form having only one password field. The span #result contains the feedback of the password.

<form id="register">
    <label for="password">Password:</label>
    <input name="password" id="password" type="password"/>
    <span id="result"></span>
</form>

CSS Styling:

Basic CSS code for the form layout:

#register {
    margin-left:100px;
}
 
#register label{
    margin-right:5px;
}
 
#register input {
    padding:5px 7px;
    border:1px solid #d5d9da;
    box-shadow: 0 0 5px #e8e9eb inset;
    width:250px;
    font-size:1em;
    outline:0;
}
 
#result{
    margin-left:5px;
}
 
#register .short{
    color:#FF0000;
}
 
#register .weak{
    color:#E66C2C;
}
 
#register .good{
    color:#2D98F3;
}
 
#register .strong{
    color:#006400;
}

We have defined CSS classes short, weak, good and strong to show the feedback messages in different colors.

The jQuery Code:

The jQuery code starts with following:

$(document).ready(function() {
    //Code here
});

Read more:http://gazpo.com/2012/04/password-strength/