Bootstrap Password Strength Meter Plugin With jQuery And Zxcvbn

A small yet customizable jQuery plugin which uses zxcvbn's algorithm and Bootstrap progress bar component to indicate the password strength while typing.

See also:

• Measure Password Strength With Zxcvbn Library - Bootstrap 4 Zxcvbn
• Customizable Password Strength Meter With jQuery And zxcvbn.js - strengthify

How to use it:

1. Include Bootstrap's stylesheet in the head section of the html page.

<link rel="stylesheet" href="bootstrap.min.css">

2. Create a password strength indicator for your password field as follows:

<form>
  <div class="form-group">
    <label for="example">Password</label>
    <input type="password" class="form-control" id="example" placeholder="Password">
    <div class="progress">
      <div class="progress-bar">
      </div>
    </div>
  </div>
</form>

3. Include necessary jQuery and zxcvbn JavaScript libraries at the bottom of the html page.

<script src="jquery.min.js"></script>
<script src="zxcvbn.js"></script>

4. Active the Bootstrap Password Strength Meter plugin.

$('#example').bootstrapPasswordStrengthMeter();

5. Options and defaults.

$('#example').bootstrapPasswordStrengthMeter({
  minPasswordLength: 6,
  level0ClassName: 'progress-bar-danger',
  level0Description: 'Weak',
  level1ClassName: 'progress-bar-danger',
  level1Description: 'Not great',
  level2ClassName: 'progress-bar-warning',
  level2Description: 'Better',
  level3ClassName: 'progress-bar-success',
  level3Description: 'Strong',
  level4ClassName: 'progress-bar-success',
  level4Description: 'Very strong',
  parentContainerClass: '.form-group'
});

Change log:

2017-03-17

• progress-bar now has data attribute of score

---

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