This time I will share jQuery Plugin and tutorial about Password Strength Checker & Visible Toggle Plugin – jQuery strength.js, hope it will help you in programming stack.
The jQuery strength.js plugin lets you measure the strength of password you typed in a text field, and toggle the password field between plain text and password by click.
Installation:
2 |
$ yarn add jquery-strength |
5 |
$ npm install jquery-strength --save |
How to use it:
1. The plugin requires fnando’s password_strength library to validate the strength of your password:
1 |
<script src="/path/to/password_strength.js"></script> |
2. Load the jQuery strength.js script after jQuery JavaScript library.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery-strength.js"></script> |
3. Call the function on the target password field and done.
1 |
<input type="password" class="password-input" name="password"> |
1 |
$(".password-input").strength(); |
4. By default, the plugin will automatically generate a checkbox to toggle the visible of your password text. You can customize the visible toggle in the JavaScript like so:
1 |
<input type="password" class="password-input" name="password"> |
1 |
$(".password-input").strength({ |
4 |
'<span class="input-group-addon"><input type="checkbox" class="{toggleClass}" title="Show/Hide Password" /></span>' |
5. More configuration options:
01 |
namespace: 'strength', |
11 |
'<span class="input-group-addon"><input type="checkbox" class="{toggleClass}" title="Show/Hide Password" /></span>', |
12 |
meter: '<div class="{meterClass}">{score}</div>', |
13 |
score: '<span class="label {scoreClass}"></span>', |
15 |
'<div class="{containerClass}"><div class="input-group">{input}{toggle}</div>{meter}</div>' |
19 |
container: 'strength-container', |
20 |
status: 'strength-{status}', |
21 |
input: 'strength-input', |
22 |
toggle: 'strength-toggle', |
23 |
meter: 'strength-meter', |
24 |
score: 'strength-score', |
25 |
shown: 'strength-shown' |
38 |
invalid: 'label-danger', |
39 |
weak: 'label-warning', |
41 |
strong: 'label-success' |
This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.
