Password Strength Meter Tutorial

Password Srength Meter is a JavaScript password strength checker based on MooTools 1.3. It aims to provide simple, reliable password strength indications across all browsers in an unobtrusive manner. It is 100% styled by CSS and allows for custom validations. It can be used with effects or without and has an optional text component that changes with each change of state. The text defaults to 'Poor', 'Weak', 'Medium', and 'Strong'; but it can be changed according to preference or language.

A Quick Tutorial

Let's build a quick registration form and use the password meter with it. Password Srength Meter requires the MooTools library, so we'll need to download the entire MooTools 1.2 Core file. Go download it quickly if you don't already have it. Don't forget to download a copy of Password Strength Meter as well.

If you're new to JavaScript (or MooTools), you'll find the implementation of Password Strength Meter fairly easy. Password Strength Meter requires no changes to your form whatsoever; it works with what you already have. We'll start with constructing our HTML form. For this basic registration form, we're only going to use 4 fields: username, password, passwordConfirm, and email.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>vmValidatorTutorial</title>
</head>

<body>
	<form id="registration" method="post" action="">
		<label for="username">Username</label>
		<input id="username" name="username" type="text" />
		<label for="password">Password</label>
		<input id="password" name="password" type="password" />
		<label for="confirmPassword">Confirm Password</label>
		<input id="confirmPassword" name="confirmPassword" type="password" />
		<label for="email">Email</label>
		<input id="email" name="email" type="text" />
		<input type="submit" value="Submit" />
	</form>
</body>
</html>

That was pretty easy, right? Let's go ahead and add just a little CSS styling to make our form look better (though we won't go overboard). For this tutorial, we're just going to put it in the head of our XHTML document, but in practice we recommend putting in your stylesheet in a separate file.

<style type="text/css">
	input, label, #container {float:left; clear:left;}
</style>

Next we need to add our JavaScript files, MooTools1.3-core.js and password-strength-meter.js. We'll put those in the document head as well.

<script type="text/javascript" src="mootools-1.3-core.js"></script>
<script src="password-strength-meter.js" type="text/javascript"></script>

Now we need to add a little bit of MooTools specific JavaScript. MooTools has a special event called 'domready' that executes whenever the HTML has finished loading. Most MooTools scripts are at least partially executed from within the 'domready' event. Again, we're just going to put this code in the document head, but it could also be in its own file.

<script type="text/javascript">
	window.addEvent('domready', function(){
		//Our Password Strength Meter code will go here
	});
</script>

All of our code is going to be inserted into the 'domready' event, right where the comment currently is. The first thing we'll need to do is initialize the Password Strength Meter class. In this case, we'll use the variable password, but you can use pass, or bob, or whatever you like. We'll setpasswordequal to a new instance of PassMeter. Because the constructor for the PassMeter class has one required argument, the name of the password form element, we're going to enter in the name 'password', surrounded in quotes to make it a string.

<script type="text/javascript">
	window.addEvent('domready', function(){
		var form = new PassMeter('password');
	});
</script>

The constructor for PassMeter also has an optional argument for options, but we'll cover that a little later. Next, we're going to add just a little more CSS styling to make our password strength meter visible. There are seven different elements that we can style. The container, the meter, the text are all elements styled by ids. The meter element also has a class of either poorPass, weakPass, mediumPass, and strongPass, which represent the different states of the meter. We're going to add to the following lines to our CSS code:

<style type="text/css">
	label, input, #containerId {float:left; clear:both;}
	#containerId, #meterId{display:block; height:25px; line-height:25px;}
	#containerId {width:200px; background:#CCCCCC; margin:10px 0px; padding:0px;}
	.poorPass {width:50px; background:#FF0000;}
	.weakPass {width:100px; background:#FF9900;}
	.mediumPass {width:150px; background:#FFFF00;}
	.strongPass {width:200px; background:#006600;}
</style>

Go ahead and try out your script now. It should have the password meter appearing below your password input. If you type at least six characters with at least one uppercase and one lowercase letter, your meter should change from 'poor' to 'weak'. If you add a number, it should change to 'medium' and if you add any character that isn't alphanumeric (like the @ symbol), it should change to 'strong'. If there are any problems, check to make sure that the paths to your javascript files are correct and that the password name is entered in string format.

Now that we've covered some of the basic CSS, let's dive into the options. Beyond what you can do with CSS, Password Strength Meter has 21 different configurable options, but don't let that intimidate you. It's designed to work well out of the box, so that you just have to provide the CSS styling for it. If you want to change an option, you only have to change that option and you can leave the rest of them alone. First, let's make some adjustments to the default text of 'Poor', 'Weak', 'Medium', and 'Strong' by changing them to 'Stinky', 'Wimpy', 'Mediocre', and 'Superman'. To do that, we'll have to use the option variables of poorText, weakText, mediumText, and strongText and assign our new values to them. The optional argument is inserted after the password name argument. Because the optional argument accepts more than one option, we need to enclose it in an object. That simply means we'll put curly braces {} around our entire set of options. Each option has two parts: the option name and its value, which are separated by a colon. If you have more than one option, each option should be separated by a comma, except the last one. Sound complicated? It's actually easier than it sounds. Let's take a look at an example:

<script type="text/javascript">
	window.addEvent('domready', function(){
		var form = new PassMeter('password', {
			poorText: 'Stinky',
			weakText: 'Wimpy',
			mediumText: 'Mediocre',
			strongText: 'Superman'
		});
	});
</script>

That's all there is to it! Try entering your password again and you'll see the new text. We could stop there, but I'll show you just a few more things Password Strength Meter can do.

The default CSS class names Password Strength Meter uses are .poorPass, .weakPass, .mediumPass, and .strongPass. The default ids are #containerId, #meterId, and #textId. If you need to change those for any reason, you can do so just by setting the new class or id name in the options. The class variables are called poorClass, weakClass, mediumClass, and strongClass and the ids are called containerId, meterId, and textId. The new names should be entered as a string, but you shouldn't add the period or pound sign before them, the script takes care of that for you.

The injectAfter option allows you to specify which form element you would like to inject the password meter after, if you want to inject it after something other than your first password input. For instance, if you wanted to inject the meter after the confirm password input, we would set the value for injectAfter as 'confirmPassword', which is the name of that input element. Or, if we wanted to inject it above the password input, we could enter in 'username' instead.

You can also choose whether or not you want to use the text or the effects by setting the useText and useFx options to either true or false. You can also control the duration of the transition effect as well as the effect itself. The duration is set in milliseconds, with a default of 250 milliseconds. The transition corresponds to the MooTools Fx transitions, which you can learn more about here. The default transition is Fx.Transitions.Sine.easeOut. It's important to note that the options discussed in this paragraph should not be entered in as a string, but as true, false, a number, or the transition type.

In addition to changing the style of Password Strength Meter, you can also change its behavior. You can specify the minimum length of the password using minLength and the maximum length using maxLength. The values for minLength and maxLength should be whole numbers.

If you're familiar with regular expressions, you can also set custom expressions to be evaluated over the default expressions. By default, Password Strength Meter has five types of validations: the minimum and maximum length (discussed above), and three regular expressions. If the minimum and maximum lengths are both satisified, Password Strength Meter will check to see if at least one uppercase and one lowercase letter have been used, if a number has been used, and if a special (non alphanumeric) character has been used. If only one of those checks is satisfied, the password will evaluate as weak; if two are satisfied, it will evaluate as medium; and if all three are satisfied, it will evaluate as strong.

To use custom regular expressions, enter the full expression as a string value for one or more of the following variables: weakRegEx, mediumRegEx, and strongRegEx. The default value for weakRegEx validates the upper and lowercase letters; mediumRegex validates the numbers, and strongRegEx validates special characters. You should note, however, that entering a custom regular expression as a value for weakRegex doesn't mean that it is the only way for a 'weak' password to be obtained because Password Strength Meter shows the weak status if only one of the regular expressions has been satisfied. Thus, a weak status could also be obtained if either the mediumRegex or strongRegex has been satisfied, but the others have not.

If you're not familiar with regular expressions or if you need a good reference, I recommend both the Regex Library and the page detailing JavaScript-specific regular expression rules at http://www.regular-expressions.info/javascript.html.

This concludes our quick tutorial. If you encounter a bug, have a question or comment, feel free to contact us. We'd also love to know if you're using it on your site. If you liked Password Strength Meter, tell someone else about it. Thanks, and enjoy!

Tags

  • Benjamin Kuker

    Benjamin Kuker

    Benjamin Kuker is the co-founder of Virtuosi Media and is married to his beautiful wife, Johanna. He is responsible for the design and maintenance of this website. He enjoys reading, writing, programming, business, sports, and traveling.

    View Benjamin's Bio

Help us spread the word.

Your Comments Are Valuable - Join The Discussion!

 

Copyright 2011 Virtuosi Media Inc.