Password strength validation with jQuery

The jQuery Password Strength Meter is a great free plugin that provides realtime client side evaluation of your password, providing visual indication regarding the strength of the password. This article covers setting up, configuring and customization of the plugin. Also credit to Tane Piper (aka digitalspaghetti) for creating a fantastic jQuery plugin.

To get started with this plugin you will need to first download it from http://plugins.jquery.com/project/pstrength. You'll want to download the latest version 2.1.0-65fc49caa868 which works with jQuery v1.2.x. Inside the "source" folder in the zip file, you'll find a minified and a nonminified file. For development and testing purposes, I recommend using the nonminified version since you can easily modify this file. Once you have the file set up (as you'll see in this article), you can use any of number of online or offline minifiers to compress your js file. Add a reference to your jQuery 1.2.x file and a reference to digitalspaghetti.password.js using the script tags.

<script src="../scripts/digitalspaghetti.password.js" type="text/javascript"></script>
<script src="../scripts/jquery.js" type="text/javascript"></script>

To activate the plugin, add an asp:textbox to your form (this is the password field) and inside the document.ready function, add the following function:

 jQuery('#password').pstrength();

Now the password strength validator is up and running. It has a number of options that allow you to customize as you see fit. The following is the list of options that can be overriden:

 'defaults' : {
   'displayMinChar': true,
   'minChar': 8,
   'minCharText': 'You must enter a minimum of %d characters',
   'colors': ["#f00", "#c06", "#f60", "#3c0", "#3f0"],
   'scores': [20, 30, 43, 50],
   'verdicts': ['Weak', 'Normal', 'Medium', 'Strong', 'Very Strong'],
   'raisePower': 1.4
},
'ruleScores' : {
   'length': 0,
   'lowercase': 1,
   'uppercase': 3,
   'one_number': 3,
   'three_numbers': 5,
   'one_special_char': 3,
   'two_special_char': 5,
   'upper_lower_combo': 2,
   'letter_number_combo': 2,
   'letter_number_char_combo': 2
},
 'rules' : {
   'length': true,
   'lowercase': true,
   'uppercase': true,
   'one_number': true,
   'three_numbers': true,
   'one_special_char': true,
   'two_special_char': true,
   'upper_lower_combo': true,
   'letter_number_combo': true,
   'letter_number_char_combo': true
}   

To customize the plugin simply pass the values you wish to overriide into the initialization function e.g.

  $j("#").pstrength({ minChar: 6, one_number: true, one_special_char: true, 
  verdicts: ['Weak', 'Normal', 'Strong', 'Very Strong'], colors: ["red", "orange", "#00cc00"] });

 In this example, the password should have a minimum of 6 characters of which one must be a numeral and one must be a nonalphanumeric character. The plugin will then display one of the words withing a bar type display providing a visual indicator of how strong or weak your password is. When the password is weak red is used, when normal orange is used and when strong to very strong a shade of green is used.

You'll also need to do a very simple modification to the digitalspaghetti.password.js file. Open the file and find line 163 in Visual Studio. The line will look like this: 

digitalspaghetti.password.width =  "1";

I u sed the following CSS in main css file to further customize the display:

.password-strength-bar {
font-size : 12px;
width : 100%;
font-family : arial, sans-serif;
color: White;
height: 25px;
margin-top: 5px;
padding: 2px; 
}
.password-min-char {
font-size : 10px;
}

You can see a live demo of the password strength validator here. In the demo the password textbox is still a plain textbox since this is not a real registration form. 

A couple of items I did not cover. One, you will need to implement some sort of server side validation of the password and not register the user if the password is not in the proper format. Also on the client you can add some logic to prevent form submission until the password is accepted by the password validator. I'll leave these up to you the reader.