Responsive Bootstrap Password Strength Meter With Progress bar jQuery Plugin

0 383

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.

Leave A Reply

Your email address will not be published.