Gmail Style Password Strength Meter

• Download source - 8.22 KB

Introduction

This is a simple password strength meter in Gmail style using CSS and JavaScript.

Background

The basic idea before developing the script is to allow the user to evaluate the strength of the password which he is entering at the time of registration.

About the Code

The zip file contains a *.html file which has JavaScript and CSS code in it. Just download it and run it.

Following is the JavaScript code which determines the strength of a password.

First 'if' checks whether or not the password length is greater than 4, if yes then 1 point value will be incremented by 1.These points will decide the CSS class to show as password strength graphically.

Second 'if' checks whether password contains lowercase and uppercase characters or not.

Third 'if' checks whether password contains at least 1 number or not.

Fourth 'if' checks whether password contains at least 1 special character or not.

Fifth 'if' checks whether password length is greater than 12 or not.

    var points = 0; //---- password strength points.

    //---- if password length is greater than 4, give 1 point.
    if (password.length > 4) points++;

    //---- if password has both lowercase and uppercase characters, give 1 point.    
    if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) points++;

    //---- if password has at least one number, give 1 point.
    if (password.match(/\d+/)) points++;

    //---- if password has at least one special character, give 1 point.
    if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )    points++;

    //---- if password length is greater than 12,  give 1 point.
    if (password.length > 12) points++;

How the Code Works

Every time a user enters a character in the textbox, an onblur function executes and sends the value of password textbox to JavaScript function which evaluates the password and gives points to it.

A password_strength div will display colors according to the changed value of points variable.

A password_description div will show the text description of password using description (desc) array and points value.

Guidelines for Strong Passwords

Common guidelines for choosing good passwords are designed to make passwords less easily discovered by intelligent guessing: 

1. Include numbers, symbols, upper and lowercase letters in passwords.
2. Password length should be around 12 to 14 characters.
3. Avoid passwords based on repetition, dictionary words, letter or number sequences, usernames, or biographical information like names or dates.

History

• 7^th August, 2008: Initial post