Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML

Gmail Style Password Strength Meter

Rate me:
Please Sign up or sign in to vote.
2.87/5 (12 votes)
7 Aug 2008GPL32 min read 43.6K   1.2K   34   6
Gmail style password strength meter

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.

JavaScript
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)


Written By
Web Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
oopyou17-Jul-12 23:34
oopyou17-Jul-12 23:34 
GeneralMessage Closed Pin
30-Nov-21 4:21
professionalRohan Rathi30-Nov-21 4:21 
GeneralMy vote of 1 Pin
Sacha Barber6-Jul-09 23:42
Sacha Barber6-Jul-09 23:42 
GeneralThanks for the code Pin
Code Regiment26-Mar-09 22:30
Code Regiment26-Mar-09 22:30 
GeneralSmall typo... Pin
Andrew Rissing2-Sep-08 6:56
Andrew Rissing2-Sep-08 6:56 
GeneralA very good script Pin
DapperGeek8-Aug-08 1:59
DapperGeek8-Aug-08 1:59 

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

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