BootstrapStrength.js
jQuery plugin to evaluate string or password strength with Bootstrap progress bar full customizable.
Thanks to @aarondo project that inspire a Bootstrap dedicated plugin.
Getting Started
Include the relevant files
Firstly include jQuery, Bootstrap and bootstrap-strength.js files. Place these codes in <head>
section or after <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 src="src/bootstrap-strength.js"></script>
<script src="demo/MyScript.js"></script>
Create a text input field or a password input field
<input type="text" id="mystring" name="string" value="" placeholder="Type here">
<input type="password" id="mypassword" name="password" value="">
All fields must have a unique ID.
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();
});
That's all. You can initialize the plugin by single ID or by class for multiple instances, but remember that all fileds must have unique ID.
Examples
BootstrapStrength.js provides a string strength indicator to show how secure a users password or a string is.
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.
Basic usage
$('.stringClass').bootstrapStrength();
Using slim progress bar
$('.stringClass').bootstrapStrength({
slimBar: true
});
Disable strip and active layout
$('.stringClass').bootstrapStrength({
strip: false,
stripped: false
});
Cusomize matching criteria
$('.passMeterCustom').bootstrapStrength({
minLenght: 12, // minimum lenght required
upperCase: 2, // at least 2 Upper case letter
lowerCase: 3, // at least 3 Lower case letter
numbers: 4, // at least 4 Numbers
specialchars: 2 // at least 2 Special Characters
});
Full options list
$.bootstrapStrength.defaults = {
stripped: true,
active: true,
slimBar: false,
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 |