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.
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.
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.
2 |
$( "#password" ).passwordStrength(); |
3. Style the password strength indicator in the CSS.
01 |
.password-strength-indicator |
03 |
border : 1px solid transparent ; |
05 |
display : inline- block ; |
11 |
.password-strength-indicator.very-weak |
14 |
border-color : #a60000 ; |
17 |
.password-strength-indicator.weak |
20 |
border-color : #c56e19 ; |
23 |
.password-strength-indicator.mediocre |
26 |
border-color : #d6d600 ; |
29 |
.password-strength-indicator.strong |
32 |
border-color : #7acc29 ; |
35 |
.password-strength-indicator.very-strong |
38 |
border-color : #1B9900 ; |
4. Default configuration options.
01 |
$( "#password" ).passwordStrength({ |
07 |
$indicator: $( "<span> </span>" ), |
10 |
indicatorClassName: "password-strength-indicator" , |
13 |
indicatorDisplayType: "inline-block" , |
22 |
containsLowercaseLetter: 2, |
23 |
containsUppercaseLetter: 2, |
29 |
strengthClassNames: [{ |
This awesome jQuery plugin is developed by halmathikmat. For more Advanced Usages, please check the demo page or visit the official website.