Slim Password Strength Meter Plugin For jQuery - Free Download Slim Password Strength Meter Plugin For jQuery

Free Download Slim Password Strength Meter Plugin For jQuery

By Posted on

This time I will share jQuery Plugin and tutorial about Slim Password Strength Meter Plugin For jQuery, hope it will help you in programming stack.

Slim Password Strength Meter Plugin For jQuery - Free Download Slim Password Strength Meter Plugin For jQuery
File Size: 41 KB
Views Total: 3262
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Just another Password Strength Meter built with jQuery that visualizes the strength of a password your user enters into a password field.

Key Features:

  • Displays a password strength indicator below the password field.
  • Custom error short/bad/good/strong messages.
  • Custom events supported.
  • Licensed under a GPL 3.0 license.

Installation:

view source
1 # NPM
2 $ npm install password-strength-meter
3  
4 # Bower
5 $ bower install password-strength-meter

How to use it:

1. Load the Password Strength Meter’s JavaScript and CSS files in the webpage which has jQuery library loaded.

view source
1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <link rel="stylesheet" href="password.css">
3 <script src="password.js"></script>

2. Call the main function password() on the password input field and done.

view source
1 $('#YOUR-PASSWORD').password();

3. Config the Password Strength Meter with the following options.

view source
01 $('#password').password({
02  
03   // custom messages
04   enterPass: 'Type your password',
05   shortPass: 'The password is too short',
06   containsField: 'The password contains your username',
07   steps: {
08     13: 'Really insecure password',
09     33: 'Weak; try combining letters & numbers',
10     67: 'Medium; try using special characters',
11     94: 'Strong password',
12   },
13  
14   // show percent
15   showPercent: true,
16  
17   // show text
18   showText: true,
19  
20   // enable animation
21   animate: true,
22   animateSpeed: 'fast',
23  
24   // select the match field for better password checks
25   field: false,
26  
27   // whether to check for partials in field
28   fieldPartialMatch: true,
29  
30   // minimum length
31   minimumLength: 4,
32  
33   // closest selector
34   closestSelector: 'div',
35  
36   // use the old colorbar image
37   useColorBarImage: false,
38  
39   // set custom rgb color ranges for colorbar
40   customColorBarRGB: {
41     red: [0, 240],
42     green: [0, 240],
43     blue: 10
44   },
45    
46 });

4. Custom events.

view source
01 $('#events').password().on('password.score', function (e, score) {
02   if (score > 75) {
03     $('#submit').removeAttr('disabled');
04   } else {
05     $('#submit').attr('disabled', true);
06   }
07 });
08  
09 $('#events').on('password.text', (e, text, score) => {
10   console.log('Called every time the text is changed (less up<a href="https://www.jqueryscript.net/time-clock/">date</a>d than password.score)')
11   console.log('Current message is %s with a score of %d', text, score)
12 })

Changelog:

v2.1.0 (2020-03-24)

  • Custom steps
  • Custom color bar
  • Allow setting closest selector (to add compatibility to any css framework, like bootstrap)
  • Other minor fixes

2019-05-25

  • v1.2.2: Added ‘closestSelector’ option.

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

Related posts: