Password Strength Checker using Javascript

You must have seen in sites like Gmail, when we fill the SignUp or Registration form, the strength of our password is shown as we enter our password. This functionality is very useful in helping us determine our password’s strength and thus securing our account more strongly against any password hacking attacks.

        In this post we shall discuss how to make such a Password Strength Checker using javascript. The following checks are done to assess the strength of the password:
  • If password has more than 6 characters
  • If password has both lower and uppercase characters
  • If password has a number
  • If password has at least one special character
  • If password has more than 12 characters
        A password conforming to all these conditions can be termed as the strongest password. The Password Strength Checker dose not perform any password validations, and only checks the strength of the password.

        The form for the example consists of a password field and a div field which shows the strength of the password.
<form>
      Password: <input type="password" name="pword" id="pword" />
      <div id="passwordStrength" class="default" > Enter your password </div>
</form>
The javascript method for analyzing the password strength is given below :
function returnPasswordStrength(password) {

        var msg = new Array("Very Weak", "Weak", "Better", "Medium", "Strong", "Strongest");
        var strength   = 0;

        // If password has more than 6 characters add one to strength
        if (password.length > 6) strength++;

        //if password has both lower and uppercase characters add one to strength
        if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) strength++;

        //if password has at least one numeral add one to strength
        if (password.match(/\d+/)) strength++;

        //if password has at least one special character add one to strength
        if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,),'\s']/) ) strength++;

        //If password has more than 12 characters add one to strength
        if (password.length > 12) strength++;

        document.getElementById("passwordStrength").innerHTML = msg[strength];
}
        In the above code we will check whether the entered password satisfies each condition. For each satisfied condition the strength is increased by one. The ‘msg’ array stores the messages for each strength value. The message corresponding to the current strength is shown in the ‘passwordStrength’ div.

        As the password strength needs to be checked after entering every character, the javascript function for assessing the strength needs to be called on KeyUp event of the password field.
<input type="password" name="pword" id="pword" onkeyup="returnPasswordStrength(this.value)" />
        The background color of the div can also be changed be defining CSS classes for each strength value and applying them on KeyUp event.
document.getElementById("passwordStrength").className = "class"+strength;
You can download the entire code from here.
Please do enter your valuable comments and suggestions

1 comments:

Related Posts Plugin for WordPress, Blogger...
 

Copyright © 2012 | ScriptSplash | Powered by Blogger Templates