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: '{scorebar}\n{score}\n{verdict}',
  mainTemplate: '\n\n\n{input} {meter}',
 
  // default CSS classes
  meterClass: 'kv-meter',
  scoreBarClass: 'kv-scorebar',
  scoreClass: 'kv-score',
  verdictClass: 'kv-verdict',
  containerClass: 'kv-password',
  inputClass: 'form-control',
  toggleClass: 'kv-toggle',
  verdictClasses: {
    0: 'label label-default badge-secondary',
    1: 'label label-danger badge-danger',
    2: 'label label-warning badge-warning',
    3: 'label label-info badge-info',
    4: 'label label-primary badge-primary',
    5: 'label label-success badge-success'
  },
 
  // customize the strength calculation algorithm here
  rules: {
    minLength: 2,
    midChar: 2,
    consecAlphaUC: 2,
    consecAlphaLC: 2,
    consecNumber: 2,
    seqAlpha: 3,
    seqNumber: 3,
    seqSymbol: 3,
    length: 4,
    number: 4,
    symbol: 6
  }
   
};
$("#devstocFreebie").strength(pluginOptions);

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");
});