inform password strength - Free Download Inform Users Of Password Strength With passwordStrength Plugin

Free Download Inform Users Of Password Strength With passwordStrength Plugin

By Posted on

This time I will share jQuery Plugin and tutorial about Inform Users Of Password Strength With passwordStrength Plugin, hope it will help you in programming stack.

inform password strength - Free Download Inform Users Of Password Strength With passwordStrength Plugin
File Size: 7.42 KB
Views Total: 538
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Yet another jQuery powered password strength indicator that calculates the password score and informs users of the current password strength while typing in a password field.

Default Password Strength Algorithm:

  • 0 points for empty string
  • 3 points for 1 lowercase character
  • 4 points for 2 lowercase characters
  • 3 points for 1 uppercase character
  • 1 point extra for 1 space
  • 2 points extra for 2 spaces
  • 4 points for 2 uppercase characters
  • 4 points extra when password contains a number
  • 5 points extra when password contains a symbol
  • 6 points for 1 lowercase, 1 uppercase characters
  • 6 points for 1 backslash
  • 8 points for 2 lowercase, 2 uppercase characters
  • 17 points for 1 lowercase, 1 uppercase characters, 1 number, and 1 symbol

CSS classes & text added to the strenth indicator accordion to the score:

  • very-weak for password with 0 points
  • weak for password with 7 points
  • mediocre for password with 13 points
  • strong for password with 19 points
  • very-strong for password with 25 points

How to use it:

1. Insert the plugin’s script ‘jquery.passwordstrength.js’ after jQuery.

view source
1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <script src="/path/to/jquery.passwordstrength.js"></script>

2. Attach the function passwordStrength to the password field and you’re done.

view source
1 $(function() {
2   $("#password").passwordStrength();
3 });

3. Style the password strength indicator in the CSS.

view source
01 .password-strength-indicator
02 {
03   border: 1px solid transparent;
04   border-radius: 3px;
05   display: inline-block;
06   min-height: 18px;
07   min-width: 80px;
08   text-align: center;
09 }
10  
11 .password-strength-indicator.very-weak
12 {
13   background: #cf0000;
14   border-color: #a60000;
15 }
16  
17 .password-strength-indicator.weak
18 {
19   background: #f6891f;
20   border-color: #c56e19;
21 }
22  
23 .password-strength-indicator.mediocre
24 {
25   background: #eeee00;
26   border-color: #d6d600;
27 }
28  
29 .password-strength-indicator.strong
30 {
31   background: #99ff33;
32   border-color: #7acc29;
33 }
34  
35 .password-strength-indicator.very-strong
36 {
37   background: #22cf00;
38   border-color: #1B9900;
39 }

4. Default configuration options.

view source
01 $("#password").passwordStrength({
02  
03   // password strength you consider secure
04   secureStrength: 25,
05  
06   // indicator element
07   $indicator: $("<span>&nbsp;</span>"),
08  
09   // CSS class of indicator
10   indicatorClassName: "password-strength-indicator",
11  
12   // display type of indicator
13   indicatorDisplayType: "inline-block",
14  
15   // shows strength text
16   text: true,
17  
18   // custom strength algorithm
19   points: {
20     forEachCharacter: 1,
21     forEachSpace: 1,
22     containsLowercaseLetter: 2,
23     containsUppercaseLetter: 2,
24     containsNumber: 4,
25     containsSymbol: 5
26   },
27  
28   // default text & CSS classnames
29   strengthClassNames: [{
30     name: "very-weak",
31     text: "very weak"
32   }, {
33     name: "weak",
34     text: "weak"
35   }, {
36     name: "mediocre",
37     text: "mediocre"
38   }, {
39     name: "strong",
40     text: "strong"
41   }, {
42       name: "very-strong",
43       text: "very strong"
44   }]
45    
46 });

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

Related posts: