Password Strength Meter jQuery Plugin
Kartik Visweswaran March 03, 2023
Password Strength Meter jQuery Plugin which measures password strength in real time. Based on factors such as length, complexity, and character variety, the password strength metre ranks passwords as weak, fair, good, strong, or very strong. It displays a visual indication of password strength and includes the option to toggle the password's visibility for added security. It has a progress bar that changes colour depending on the strength of the password entered, as well as useful feedback to help improve password security.
Password Strength Meter jQuery plugin is simple to integrate into any website or application and is highly customizable, allowing you to change the strength thresholds and feedback messages. You can use the Strength Meter to improve the security of your website or application by encouraging users to use stronger passwords.
Users can hide or show their password as they type it using the visibility toggle. This feature prevents shoulder surfing and helps users ensure they are entering their password correctly.
Overall, the jQuery Password Strength Meter and Visibility Toggle is a straightforward yet powerful tool for improving website security and user experience.
Password Strength Meter Implementation
Load the password strength metre plugin files and include the jQuery libraries.
Add your CSS class (for example, devstoc-freebie) to the password field, and the plugin will handle the rest.
JavaScript should be used to initialise the plugin.
var pluginOptions = { // language language: 'en', // shows password strength meter showMeter: true, // shows password visibility toggle toggleMask: true, // custom template inputTemplate: '\n{input}\n{toggle}\n', inputNoToggleTemplate: '{input}', meterTemplate: ' \n{verdict}', mainTemplate: '
{input} | \n{meter} | \n
API methods
// refresh $("#devstocFreebie").strength('refresh'); // reset $("#devstocFreebie").strength('reset'); // return the current strength score: $("#devstocFreebie").strength('score'); // return the current strength verdict: $("#devstocFreebie").strength('verdict');
Event handlers
$("#devstocFreebie").on('strength:change', function(event) { console.log("strength:change"); }); $("#devstocFreebie").on('strength:reset', function(event) { console.log("strength:reset"); }); $("#devstocFreebie").on('strength:toggle', function(event) { console.log("strength:toggle"); });
Next: Benchmark Email Marketing tool: A Complete Review
Supported Devices
Google Chrome, Firefox, Opera, Wavebox, MS Edge, IE 10+
Tags
password strength plugin, show hide password, devstoc freebies, jquery plugins, javascript libraries