Slick Password Strength Indicator with jQuery and Bootstrap - BootstrapStrength.js

BootstrapStrength.js is a lightweight jQuery plugin to generate a highly customizable strength indicator for your password field using Bootstrap progress bar component.

Default rules:

• At least 8 characters
• At least 1 lowercase letter
• At least 1 uppercase letter
• At least 1 number
• At least 1 special character such as [!,%,&,@,#,$,^,*,?,_,~]

How to use it:

1. Download and include the jQuery BootstrapStrength.js plugin after jQuery library. Bootstrap 3 framework is required as well.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/bootstrap-strength.js"></script>
  ...
<link rel="stylesheet" href="/path/to/bootstrap.min.css">

2. Just call the function on your password input field and we're ready to go.

$('.demo').bootstrapStrength();

3. Customize the password strength indicator.

$('.demo').bootstrapStrength({

  // enable/disable stripped progress bar
  stripped: true,

  // enable/disable active layout
  active: true,

  // enable/disable slim progress bar
  slimBar: false,

  // custom rules
  minLenght: 8,
  upperCase: 1,
  upperReg: "[A-Z]",
  lowerCase: 1,
  lowerReg: "[a-z]",
  numbers: 1,
  numberReg: "[0-9]",
  specialchars: 1,
  specialReg: "[!,%,&,@,#,$,^,*,?,_,~]",

  // top margin
  topMargin: "5px;",

  // custom css classes
  meterClasses: {
    weak: "progress-bar-danger",
    medium: "progress-bar-warning",
    good: "progress-bar-success"
  }
  
});

---

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