Gmail style password strength meter

• Download password_strenght_css_javascript - 8.22 KB

Introduction

A simple password strength meter in Gmail style using CSS and JavaScript.

Background

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

About the code

The zip file contains .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 password.

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

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

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

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

Fifth 'if' checks weather password strength is above 12 or not.

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

    //---- if password is bigger 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 is bigger than 12 ,  give 1 point.
    if (password.length > 12) points++;

How Code Works

Every time user enters a character in text box a onblur function executes and send the value of password textbox to javascript function which evaluates the password and give 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.