Animated Password Strength Meter with jQuery and Bootstrap

Pwstrength is a jQuery plugin works with Twitter's bootstrap for creating an animated bar attached to the password input filed to display a real-time Password Strength Meter.

Features:

• Beautiful and easy to use.
• Multiple instances on one page.
• Custom rules.
• Callback functions supported.
• Custom minimum password length.

See also:

• Password Strength Indicator with jQuery
• jQuery Password Strength Checker Plugin - pStrength
• Simple Password Strength Notification Plugin
• Naked Password Strength Plugin with jQuery
• Beautiful Password Strength Meter
• Simple jQuery Password Strength Indicator Plugin - passMeter

Basic Usage:

1. Load the CDN hosted Twitter's Bootstrap CSS in the head of your page.

<link rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

2. Markup html structure.

<form>
<div class="form-group">
<input type="text" id="username" class="form-control" />
<input type="password" id="password" class="form-control" />
</div>
</form>

3. Load the latest jQuery javascript library and jQuery Pwstrength plugin at the end of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="pwstrength.js"></script>

4. Initialize the plugin with options.

<script type="text/javascript">
jQuery(document).ready(function () {
"use strict";
var options = {
minChar: 8,
bootstrap3: true,
};
$(':password').pwstrength(options);
});
</script>

5. All the options.

<script type="text/javascript">
jQuery(document).ready(function () {
"use strict";
var options = {
minChar: 8,
bootstrap3: false,
errorMessages: {
    password_too_short: "<font color='red'>The Password is too short</font>",
    same_as_username: "Your password cannot be the same as your username"
},
scores: [17, 26, 40, 50],
verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"],
showVerdicts: true,
showVerdictsInitially: false,
raisePower: 1.4,
usernameField: "#username",
};
$(':password').pwstrength(options);
});
</script>

Change log:

v1.2.2 (2014-09-12)

• Every rule can have associated error messages.

v1.2.1 (2014-08-24)

• Improve documentation.
• Fix typo in alphabetical sequence.
• Use the not minified version of the library in bower as main file.
• Listen also to the change and onpaste events, not only to the onkeyup.
• Show the lowest verdict when the score is below zero.
• New option to pass more input fields content to the zxcvbn library.
• Don't show the verdicts inside the popover if they are being showed inside the progressbar.

v1.1.5 (2014-06-21)

• Better Bower configuration.
• Pass also the verdict level to the "on key up" event handler.
• Add a basic usage section to the readme.

v1.1.4 (2014-06-19)

• Bower support.
• Pass the score and the verdict to the "on key up" event handler.
• Upgrade dev dependencies: grunt plugins and jquery
• Bugfix in sequences lookup
• New tests for sequences lookup

v1.1.1 (2014-02-18)

• Pass the username field content to the zxcvbn function, so zxcvbn takes it into consideration when scoring the password.
• Add a debug option, so the score gets printed in the JS console.
• Check reversed sequences too in the sequences rule.
• Fix the popover flickering.

v1.1.0 (2013-12-28)

• Separate source file in several smaller files.
• Add Grunt support for creating a bundle and a minified version.
• Add tests for the rules engine, and continuos integration with Travis.

v1.0.0 (2013-12-24)

• Complete refactor of the code. This is a cleaner version, easier to extend and mantain.
• Broke backwards compatibility. Bootstrap 3 is the default option now, other options default values have changed. Options structure has changed too.
• Old tests have been renamed to examples, which is what they really are. Leave room for real tests.

v0.4.6 (2013-12-17)

• Support popovers in Bootstrap 2 too
• Remove showVerdictsInitially option.

v0.4.5 (2013-12-07)

• Fix error message when the password contains the username.
• Check if the password is an email, and mark as weak.
• Add a container option, it will be used to look for the viewports.

---

This awesome jQuery plugin is developed by ablanco. For more Advanced Usages, please check the demo page or visit the official website.