Skip to content

Latest commit

 

History

History
179 lines (157 loc) · 4.79 KB

README.md

File metadata and controls

179 lines (157 loc) · 4.79 KB
Raw

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