Resposive Bootstrap Password Strength Meter With Progressbar jQuery Plugin

by Posted on

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, 
  animate: true, 
  animateSpeed: 'fast', 
  username: false, 
  usernamePartialMatch: true, 
  minimumLength: 4 
 });
});

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.



Published by admin