The basic break down is we add an event handler on your password field that will check the password for every key input the user types. This allows for an updated meter as the user types the password. When you get into the algorithm that actually checks how secure a password is, there are many routes you can go. When researching for this project, I chose to base my code off of the kind folks over at Intelligent Web. There theory is to calculate how many different combinations there are for the password you enter, then determine how many days it would take to crack your password. The algorithm returns a percentage that we then in turn convert to a nice GUI for the end user to see. So let’s take a look at the code:

The JavaScript is fairly straight forward. There are settings at the top for different checks to enable or disable. Here is the JavaScript:

 // Password strength meter v1.0
// Matthew R. Miller – 2007
// www.codeandcoffee.com
// Based off of code from http://www.intelligent-web.co.uk

// Settings
// — Toggle to true or false, if you want to change what is checked in the password
var bCheckNumbers = true;
var bCheckUpperCase = true;
var bCheckLowerCase = true;
var bCheckPunctuation = true;
var nPasswordLifetime = 365;

// Check password
function checkPassword(strPassword)
{
// Reset combination count
nCombinations = 0;

// Check numbers
if (bCheckNumbers)
{
strCheck = “0123456789″;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}

// Check upper case
if (bCheckUpperCase)
{
strCheck = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}

// Check lower case
if (bCheckLowerCase)
{
strCheck = “abcdefghijklmnopqrstuvwxyz”;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}

// Check punctuation
if (bCheckPunctuation)
{
strCheck = “;:-_=+\|//?^&amp;!.@$£#*()%~<>{}[]“;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}

// Calculate
// — 500 tries per second => minutes
var nDays = ((Math.pow(nCombinations, strPassword.length) / 500) / 2) / 86400;

// Number of days out of password lifetime setting
var nPerc = nDays / nPasswordLifetime;

return nPerc;
}

// Runs password through check and then updates GUI
function runPassword(strPassword, strFieldID)
{
// Check password
nPerc = checkPassword(strPassword);

// Get controls
var ctlBar = document.getElementById(strFieldID + “_bar”);
var ctlText = document.getElementById(strFieldID + “_text”);
if (!ctlBar || !ctlText)
return;

// Set new width
var nRound = Math.round(nPerc * 100);
if (nRound < (strPassword.length * 5))
{
nRound += strPassword.length * 5;
}
if (nRound > 100)
nRound = 100;
ctlBar.style.width = nRound + “%”;

// Color and text
if (nRound > 95)
{
strText = “Very Secure”;
strColor = “#3bce08″;
}
else if (nRound > 75)
{
strText = “Secure”;
strColor = “orange”;
}
else if (nRound > 50)
{
strText = “Mediocre”;
strColor = “#ffd801″;
}
else
{
strColor = “red”;
strText = “Insecure”;
}
ctlBar.style.backgroundColor = strColor;
ctlText.innerHTML = “” + strText + ““;
}

// Checks a string for a list of characters
function doesContain(strPassword, strCheck)
{
nCount = 0;

for (i = 0; i < strPassword.length; i++)
{
if (strCheck.indexOf(strPassword.charAt(i)) > -1)
{
nCount++;
}
}

return nCount;
}  

On the HTML side, I have setup a simple form to display the interaction the user will receive.

Demo: http://www.codeandcoffee.com/2007/06/how-to-make-a-password-strength-meter-like-google/
Download: http://www.codeandcoffee.com/wp-content/uploads/pwd_strength.js
Source: http://www.codeandcoffee.com/2007/06/how-to-make-a-password-strength-meter-like-google/

Related Listings:

1. Password Strength – Estimates brute force time jQuery plugin This plugin shows the strength of you passwords by telling...
2. Password Fields With strength Meter This script is built with no framework. It works based...
3. Show Simple Password Fields A simple Javascript bookmarklet shows password field values. In form...