Easy Password Strength Meter Widget For jQuery UI
File Size: | 3.44 KB |
---|---|
Views Total: | 1685 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery based Password Strength Meter widget that displays an auto-update progressbar under the password input to visualize the current password strength you typed.
How to use it:
1. Import the necessary jQuery and jQuery UI into the page.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
2. Import the Password Strength Meter widget's script into the page.
<script src="password-meter.js"></script>
3. The minimal html structure.
<div id="divPassword"> <input type="password" id="txtPassword" placeholder="Enter Password"> <div class="password-meter"> <div class="password-strength"></div> </div> </div>
4. Activate the Password Strength Meter.
$(document).ready(function () { $('#divPassword').PasswordMeter(); });
5. Apply your own CSS styles to the Password Strength Meter.
.password-meter { width: 208px; height: 4px; margin: 0px; padding: 0px; background: #e2e2e2; clear:left; } .password-strength { margin: 0; padding: 0; height: 4px; -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; }
6. Customize the minimum requirements.
vars: { passwordBoxId: '', strength: 0, symbols: ['~', '`', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '-', '_', '+', '=', '|', '\\', '[', '{', ']', '}', ':', ';', '\'', '"', ',', '<', '.', '>', '/', '?'], alphaCount: 0, numberCount: 0, symbolCount: 0, length: 0 }
7. Customize the colors of the Password Strength Meter.
options: { color0: '#e2e2e2', color25: '#ff6a00', color50: '#f7d722', color75: '#b6ff00', color100: '#6bc246' },
This awesome jQuery plugin is developed by Gireesh-SB. For more Advanced Usages, please check the demo page or visit the official website.