Customizable Password Strength Meter With jQuery And zxcvbn.js - strengthify

Customizable Password Strength Meter With jQuery And zxcvbn.js - strengthify
File Size: 7.53 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another password strength meter plugin which provides visual feedback (indicator bar, text message and tooltip) to display the strength of the password using the dropbox's zxcvbn library.

Basic usage:

1. Add jQuery library and the jQuery strengthify plugin's files into your webpage.

<link rel="stylesheet" href="strengthify.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.strengthify.js"></script>

2. Just call the function on the password field and specify the path to the zxcvbn library and we're done.

$('.password-field').strengthify({
  zxcvbn: '/path/to/zxcvbn.js'
})

3. Config the password strength meter with the following options.

$('.password-field').strengthify({

  // messages displayed in the tooltip
  titles: [
    'Weakest',
    'Weak',
    'So-so',
    'Good',
    'Perfect'
  ],

  // choose now between tooltip and element or both
  tilesOptions:{
    tooltip: true,
    element: false
  },

  // display tooltips
  drawTitles: false,

  // display text messages
  drawMessage: false,

  // display strenth indicator bars
  drawBars: true
  
})

Change log:

2017-03-27

  • Use eval directly

2017-03-11

  • Added missing break

2016-06-15

  • v0.5.1

2016-04-18

  • add tilesOptions

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