Simple Password Strength Meter For Bootstrap

Simple Password Strength Meter For Bootstrap

This is a Bootstrap Password Meter plugin which utilizes Password Score library to validate the visualize the strength of your password when typing.

1. Insert the required jQuery, Bootstrap and Password Score into the document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/password-score.js"></script>
<script src="/path/to/password-score-options.js"></script>

2. Insert the Password Strength Meter's script after jQuery.

<script src="/path/to/bootstrap-strength-meter.js"></script>

3. Active the Password Strength Meter on the target password field and show the password strength as text.

<input type="password" id="example>
$(document).ready(function() {
  $('#example').strengthMeter('text', {
    container: input.parent(),
    hierarchy: {
      '0': ['text-danger', 'ridiculous'],
      '10': ['text-danger', 'very weak'],
      '20': ['text-warning', 'weak'],
      '30': ['text-warning', 'good'],
      '40': ['text-success', 'strong'],
      '50': ['text-success', 'very strong']
    },
    passwordScore: {
      options: [],
      append: true
    }
  });
});

4. Validate the password input and show the password strength in a tooltip.

$(document).ready(function() {
  $('#example').strengthMeter('tooltip', {
    hierarchy: {
      '0': 'ridiculous',
      '10': 'very weak',
      '20': 'weak',
      '30': 'good',
      '40': 'strong',
      '50': 'very strong'
    },
    tooltip: {
      placement: 'right'
    },
    passwordScore: {
      options: [],
      append: true
    }
  });
});

5. Validate the password input and visualize the password strength as a live-update progress bar.

<input type="password" id="example-progress">
<div id="progress-container"></div>
$(document).ready(function() {
  $('#example-progress').strengthMeter('progressBar', {
    container: $('#progress-container')
    base: 80,
    hierarchy: {
      '0': 'progress-bar-danger',
      '25': 'progress-bar-warning',
      '50': 'progress-bar-success'
    },
    passwordScore: {
      options: [],
      append: true
    }
  });
});

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

  • Publication date: 19.01.2018
  • Source