Demo

• Single Demo
• Multi Demo
• Rules Demo

jQuery Password Strength Meter for Twitter Bootstrap

The jQuery Password Strength Meter is a plugin for Twitter Bootstrap that provides rulesets for visualy displaying the quality of a users typed in password.

Requirements

• jQuery (tested with 1.8.3)
• Bootstrap CSS for progress bars (tested with 2.2.2)

Options

• minChar:

  Default: 8 (Integer)

  Sets the minimum required of characters for a password to not be considered too weak

• verdicts:

  Default: ["Weak", "Normal", "Medium", "Strong", "Very Strong"] (Array)

  The display names for the verdicts related to the progressClass

• scores:

  Default: [17, 26, 40, 50] (Array)

  The scores used to determine what progressClass and verdicts to display

• showVerdicts:

  Default: true (Boolean)

  Determines if the verdicts are display on the progress bar or not

• viewports:

  Default: (Object)

  {
    progress: undefined,
    verdict: undefined,
    errors: undefined
  }
  

  An object containing the viewports to use to show the elements of the strength meter. Each one can be a CSS selector ("#progressbar") or a DOM node reference.

• usernameField:

  Default: "#username" (String)

  The username field to match a password to, to ensure the user does not use the same value for their password

• raisePower:

  Default: 1.4 (Double)

  The value used to modify the final score, allows you to tailor your results

• onLoad:

  Default: undefined (Function)

  A callback function, fired on load of the widget

• onKeyUp:

  Default: undefined (Function)

  A callback function, fired on key up when the user is typing

• errorMessages:

  Default: (Object)

  {
    password_to_short : "The Password is too short",
    same_as_username : "Your password cannot be the same as your username"
  }
  

  An object containing error messages. These can be overwritten for language purposes, and can also be added to for your custom rules.

Adding Custom Rules

The plugin comes with the functionality to easily define your own custom rules. The format is as follows:

$("#passwdfield").pwstrength("addRule", "ruleName", function (options, word, score) {}, rule_score, rule_enabled);

Example:

$("#passwdfield").pwstrength("addRule", "testRule", function (options, word, score) {
    return word.match(/[a-z].[0-9]/) && score;
}, 10, true);

Callback Functions

The plugin provides two callback functions, onLoad and onKeyUp. You can use them like this:

$(document).ready(function () {
    var options = {
        onLoad: function () {
            $('#messages').text('Start typing password');
        },
        onKeyUp: function (evt) {
            $(evt.target).pwstrength("outputErrorList");
        }
    };
    $(':password').pwstrength(options);
});