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

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