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

Free Download Customizable Password Strength Meter With jQuery And zxcvbn.js – strengthify

By Posted on

This time I will share jQuery Plugin and tutorial about Customizable Password Strength Meter With jQuery And zxcvbn.js – strengthify, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <link rel="stylesheet" href="strengthify.css">
2 <script src="//code.jquery.com/jquery.min.js"></script>
3 <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.

view source
1 $('.password-field').strengthify({
2   zxcvbn: '/path/to/zxcvbn.js'
3 })

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

view source
01 $('.password-field').strengthify({
02  
03   // an array of strings that zxcvbn will treat as an extra dictionary
04   userInputs: [],
05  
06   // messages displayed in the tooltip
07   titles: [
08     'Weakest',
09     'Weak',
10     'So-so',
11     'Good',
12     'Perfect'
13   ],
14  
15   // choose now between tooltip and element or both
16   tilesOptions:{
17     tooltip: true,
18     element: false
19   },
20  
21   // display tooltips
22   drawTitles: false,
23  
24   // display text messages
25   drawMessage: false,
26  
27   // display strenth indicator bars
28   drawBars: true,
29  
30   // element after which the strengthify element should be inserted
31   $addAfter: null,
32  
33   // a nonce that is added to the <script> tag to load the zxcvbn.js file asynchronously
34   nonce: null
35    
36 })

Changelog:

v0.5.9 (2020-08-03)

  • Don’t overdo the strength check, the first 100 chars are enough

v0.5.8 (2019-03-25)

  • wait for load of script before binding

v0.5.7 (2019-03-22)

  • add option for user input

2018-10-16

  • Have the nonce properly set in all browsers

2018-10-04

  • Allow to specify a nonce for the loaded script

2018-09-28

  • Remove dependency on eval()

2018-03-22

  • Small improvement for onResult callback option

2018-01-11

  • v0.5.3: Make possible to specify the element to add the strength bar after

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.

Related posts: