Password Meter Bootstrap 4

Password Meter Bootstrap 4

Web Stuff 09.02.2017 628

After the great success of our Bootstrap 3 Password Indicator version, we have rewritten the code to work with Bootstrap 4.

Password indicators shown how strong the password is in a graphical or text 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 4 to achieve the stylish password indicator. With this version we have also added the option to have text as well.

Javascript Function

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

	var msg = ['not acceptable', 'very weak', 'weak', 'standard', 'looks good', 'yeahhh, strong mate.'];

	var desc = ['0%', '20%', '40%', '60%', '80%', '100%'];
	var descClass = ['', 'bg-danger', 'bg-danger', 'bg-warning', 'bg-success', 'bg-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 graphic
	$(".jak_pstrength").removeClass(descClass[score-1]).addClass(descClass[score]).css( "width", desc[score] );

	// Display indicator text

	// Output the score to the console log, can be removed when used live.

All lines are commented through, in the first line you can change the text to your needs if you like to show text instead of the progress bar.

var msg = ['not acceptable', 'very weak', 'weak', 'standard', 'looks good', 'yeahhh, strong mate.'];

To initiate the function you will need a little bit of jQuery where you form is shown to the visitor.

    	jQuery("#password").keyup(function() {

Feel free to download our password indicator for Bootstrap 4 and use it in your project. Comments are open with the form below.

Comment(s) (0)

Hey, leave a comment...