Responsive Bootstrap Password Strength Meter With Progress bar jQuery Plugin

Password Strength Meter helps user to choose strongest password so that nobody can easily guess their password also safe from brute-force hacking attack. So that in this post I am going to share Resposive Bootstrap Password Strength Meter With Progressbar jQuery Plugin which you can use on your signup form along with username. It’ll display password complexity in % with progressbar.

Integrate Password Strength Meter

Libraries

First load latest jQuery core library and bootstrap library with plugins library.

<!--CSS-->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="password.min.css" />
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="password.min.js"></script>

HTML

Create simple password field.

<div class="form-group">
                    <label for="password">
                        Password
                    </label>
                    <input id="password" type="password" class="form-control" />
                </div>

JS

Call the plugin function password() on the password input field and all set.

$(function() {  
 $('#password').password();
});

You can also pass list of available options to customize your password strength meter as per your need, here is the list of options you can use:

$(function() {  
 $('#password').password({
  shortPass: 'The password is too short',
  badPass: 'Weak; try combining letters & numbers',
  goodPass: 'Medium; try using special charecters',
  strongPass: 'Strong password',
  containsUsername: 'The password contains the username',
  enterPass: 'Type your password',
  showPercent: false,
  showText: true, // shows the text tips
  animate: true, // whether or not to animate the progress bar on input blur/focus
  animateSpeed: 'fast', // the above animation speed
  username: false, // select the username field (selector or jQuery instance) for better password checks
  usernamePartialMatch: true, // whether to check for username partials
  minimumLength: 4 // minimum password length (below this threshold, the score is 0)
 });
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.