Easy Password Strength Meter Widget For jQuery UI

Yet another jQuery based Password Strength Meter widget that displays an auto-update progressbar under the password input to visualize the current password strength you typed.

How to use it:

1. Import the necessary jQuery and jQuery UI into the page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

2. Import the Password Strength Meter widget's script into the page.

<script src="password-meter.js"></script>

3. The minimal html structure.

<div id="divPassword">
  <input type="password" id="txtPassword" placeholder="Enter Password">
  <div class="password-meter">
    <div class="password-strength"></div>
  </div>
</div>

4. Activate the Password Strength Meter.

$(document).ready(function () {
  $('#divPassword').PasswordMeter();
});

5. Apply your own CSS styles to the Password Strength Meter.

.password-meter {
  width: 208px;
  height: 4px;
  margin: 0px;
  padding: 0px;
  background: #e2e2e2;
  clear:left;
}

.password-strength {
  margin: 0;
  padding: 0;
  height: 4px;   
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

6. Customize the minimum requirements.

vars: {
  passwordBoxId: '',
  strength: 0,
  symbols: ['~', '`', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '-', '_', '+', '=', '|', '\\', '[', '{', ']', '}', ':', ';', '\'', '"', ',', '<', '.', '>', '/', '?'],
  alphaCount: 0,
  numberCount: 0,
  symbolCount: 0,
  length: 0
}

7. Customize the colors of the Password Strength Meter.

options: {
  color0: '#e2e2e2',
  color25: '#ff6a00',
  color50: '#f7d722',
  color75: '#b6ff00',
  color100: '#6bc246'
},

---

This awesome jQuery plugin is developed by Gireesh-SB. For more Advanced Usages, please check the demo page or visit the official website.