Password Strength Meter Bootstrap - Free Download Simple Password Strength Meter For Bootstrap

Free Download Simple Password Strength Meter For Bootstrap

By Posted on

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

Password Strength Meter Bootstrap - Free Download Simple Password Strength Meter For Bootstrap
File Size: 160 KB
Views Total: 9160
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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

How to use it:

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

view source
1 <link rel="stylesheet" href="/path/to/bootstrap.min.css">
2 <script src="/path/to/jquery.min.js"></script>
3 <script src="/path/to/bootstrap.min.js"></script>
4 <script src="/path/to/password-score.js"></script>
5 <script src="/path/to/password-score-options.js"></script>

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

view source
1 <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.

view source
1 <input type="password" id="example>
view source
01 $(document).ready(function() {
02   $('#example').strengthMeter('text', {
03     container: input.parent(),
04     hierarchy: {
05       '0': ['text-danger', 'ridiculous'],
06       '10': ['text-danger', 'very weak'],
07       '20': ['text-warning', 'weak'],
08       '30': ['text-warning', 'good'],
09       '40': ['text-success', 'strong'],
10       '50': ['text-success', 'very strong']
11     },
12     passwordScore: {
13       options: [],
14       append: true
15     }
16   });
17 });

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

view source
01 $(document).ready(function() {
02   $('#example').strengthMeter('tooltip', {
03     hierarchy: {
04       '0': 'ridiculous',
05       '10': 'very weak',
06       '20': 'weak',
07       '30': 'good',
08       '40': 'strong',
09       '50': 'very strong'
10     },
11     tooltip: {
12       placement: 'right'
13     },
14     passwordScore: {
15       options: [],
16       append: true
17     }
18   });
19 });

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

view source
1 <input type="password" id="example-progress">
2 <div id="progress-container"></div>
view source
01 $(document).ready(function() {
02   $('#example-progress').strengthMeter('progressBar', {
03     container: $('#progress-container')
04     base: 80,
05     hierarchy: {
06       '0': 'progress-bar-danger',
07       '25': 'progress-bar-warning',
08       '50': 'progress-bar-success'
09     },
10     passwordScore: {
11       options: [],
12       append: true
13     }
14   });
15 });

Changelog:

2019-11-26

  • Updated default strength values a bit.

2018-02-17

  • Bugfix

2018-02-16

  • Updated Password Score.

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

source : jquery.net

Related posts: