Bootstrap 3 - jQuery Password strength

Bootstrap 3 - jQuery Password strength

Web Stuff 25.08.2015 11623

We have designed a password meter for our products and here it is. Bootstrap 3 and jQuery is necessary to run the password strenght meter.

Password indicators shown how strong the password is in a graphical way, it has been proven that user actually use a stronger password when they see how strong or weak the password is.

Download Demo

We will use a little bit of jQuery and the build in progress bar from bootstrap to achieve the stylish password indicator.

JavaScript Function

/* Password strength indicator */
function passwordStrength(password) {

	var desc = [{'width':'0px'}, {'width':'20%'}, {'width':'40%'}, {'width':'60%'}, {'width':'80%'}, {'width':'100%'}];
	
	var descClass = ['', 'progress-bar-danger', 'progress-bar-danger', 'progress-bar-warning', 'progress-bar-success', 'progress-bar-success'];

	var score = 0;

	//if password bigger than 6 give 1 point
	if (password.length > 6) score++;

	//if password has both lower and uppercase characters give 1 point	
	if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) score++;

	//if password has at least one number give 1 point
	if (password.match(/d+/)) score++;

	//if password has at least one special caracther give 1 point
	if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )	score++;

	//if password bigger than 12 give another 1 point
	if (password.length > 10) score++;
	
	// display indicator
	$("#jak_pstrength").removeClass(descClass[score-1]).addClass(descClass[score]).css(desc[score]);
}

The jQuery

jQuery(document).ready(function(){
	jQuery("#oldpass").focus();
	jQuery("#pass").keyup(function() {
	  passwordStrength(jQuery(this).val());
	});
});

Bootstrap

<div class="progress progress-striped active">
<div id="jak_pstrength" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>