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.
BootstrapStrength.js provides a string strength indicator to show how secure a users password or a string is.
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.
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>All fields must have a unique ID.
<input id="myPassword" type="password" name="" value="">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"
}
});| 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 |