Click here to Skip to main content
Click here to Skip to main content

Gmail Style Password Strength Meter

By , 7 Aug 2008
Rate this:
Please Sign up or sign in to vote.

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

  • 7th August, 2008: Initial post

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

About the Author

Harmeet Singh Bhamra
Web Developer
India India
No Biography provided

Comments and Discussions

 
GeneralSmall typo... PinmemberAndrew Rissing2-Sep-08 6:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 7 Aug 2008
Article Copyright 2008 by Harmeet Singh Bhamra
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid