BootstrapStrength.js
jQuery plugin to calculate string or password strength with Bootstrap progress bar full customizable. Thanks to https://github.com/aarondo project that inspire a Bootstrap dedicated plugin.
Documentation
BootstrapStrength.js provides a string strength indicator to show how secure a users password or a string is.
Demo
For a demo visit http://rivalex.github.io/BootstrapStrength.js/
The string strength indicator is marked on 5 scores. These are
- String must contain 8 characters or more
- String must contain 1 lowercase letter
- String must contain 1 uppercase letter
- String must contain 1 number
- String must contain 1 special character such as
[!,%,&,@,#,$,^,*,?,_,~]
The script works on input fileds an on Bootstrap input group fields as well.
Getting Started
Include the relevant files
Firstly include jQuery, Bootstrap and bootstrap-strength.js files. Place these before <head> section or in footer as well.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script type="text/javascript" src="bootstrap-strength.js"></script> <script type="text/javascript" src="myScript.js"></script>Create a password or text input field
All fields must have a unique ID.
<input id="myPassword" type="password" name="" value="">Initiate the plugin
Once you have created your input field you will need to initiate the plugin. At its most basic level you can initiate the plugin like:
$(document).ready(function ($) { $("#myPassword").bootstrapStrength(); });If you want to initiate the plugin with options then you can do so like:
$('#myPassword').bootstrapStrength({ stripped: true, active: true, slimBar: true, minLenght: 8, upperCase: 1, upperReg: "[A-Z]", lowerCase: 1, lowerReg: "[a-z]", numbers: 1, numberReg: "[0-9]", specialchars: 1, specialReg: "[!,%,&,@,#,$,^,*,?,_,~]", topMargin: "5px;", meterClasses: { weak: "progress-bar-danger", medium: "progress-bar-warning", good: "progress-bar-success" } });Options
| Variable | Default Value | Description |
|---|---|---|
| stripped | true | Use the stripped progress bar from Bootstrap css |
| active | true | Animate the stripped progress bar if enabled |
| slimBar | false | Reduce the standard Bootstrap progress bar to a 7px height |
| minLenght | 8 | Define the minumum length of the string |
| upperCase | 1 | Define how many Upper case letter/s are required. Any positive integer is accepted |
| upperReg | [A-Z] | A RegEx containing the Capitol definition for matching. It can be customized to mach specific character groups. |
| lowerCase | 1 | Define how many Lower case letter/s are required. Any positive integer is accepted |
| lowerReg | [a-z] | A RegEx containing the Lower Case definition for matching. It can be customized to mach specific character groups. |
| numbers | 1 | Define how many Number/s are required. Any positive integer is accepted |
| numberReg | [0-9] | A RegEx containing the Numbers definition for matching. It can be customized to mach specific character groups. |
| specialchars | 1 | Define how many Special Character/s are required. Any positive integer is accepted |
| specialReg | [!,%,&,@,#,$,^,*,?,_,~] | A RegEx containing the Special Character definition for matching. It can be customized to mach specific character groups. |
| topMargin | 5px | Define the margin between input and progress bar. |
| meterClasses | Contain an array for css progress bar classes | |
| meterClasses.weak | progress-bar-danger | Style use under 50% of string strength |
| meterClasses.medium | progress-bar-warning | Style use between 50% and 80% of string strength |
| meterClasses.good | progress-bar-success | Style use for 100% of string strength |
