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"
}
}); <tr>
<td>meterDescription</td>
<td></td>
<td>Contain a list of password strength description</td>
</tr>
<tr>
<td>meterDescription.weak</td>
<td>Weak</td>
<td>Description text for password under 50% of string strength</td>
</tr>
<tr>
<td>meterDescription.medium</td>
<td>Medium</td>
<td>Description text for password between 50% and 80% of string strength</td>
</tr>
<tr>
<td>meterDescription.good</td>
<td>Good</td>
<td>Description text for password at 100% of string strength</td>
</tr>
<tr>
<td>meterPreText</td>
<td>Password Strength : </td>
<td>Text descriping the meter</td>
</tr>
<tr>
<td>rulesMessage</td>
<td>Password must consist of the following :</td>
<td>Text prompting the user about the rules of the password</td>
</tr>
<tr>
<td>rulesDescription</td>
<td></td>
<td>Description text for password at 100% of string strength</td>
</tr>
<tr>
<td>rulesDescription.minLenght</td>
<td>Minimum character</td>
<td>Description text for minimum number of characters</td>
</tr>
<tr>
<td>rulesDescription.lowerCase</td>
<td>lower case character</td>
<td>Description text for lower case characters</td>
</tr>
<tr>
<td>rulesDescription.upperCase</td>
<td>UPPER CASE CHARACTER</td>
<td>Description text for upper case characters</td>
</tr>
<tr>
<td>rulesDescription.numbers</td>
<td>Digits</td>
<td>Description text for digits</td>
</tr>
<tr>
<td>rulesDescription.specialchars</td>
<td>
</td>
<td>Description text for speacial characters</td>
</tr>
<tr>
<td>rulesClass</td>
<td>list-group-item-success
</td>
<td>Class of rules success</td>
</tr>
</tbody>
| 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 |