Demo

Type and test your password

Weak example: qwerty

Medium example: Qwerty

Strong example: Qwerty@

Very Strong example: 2Qwerty@

Passtrength.js

Fully responsive jQuery input password strength indicator plugin. Featuring multiple strength security indicators and show/hide password

Documentation

Passtrength JS provides a basic visual system that indicates the strength of the password entered in any input type password.

This basic indication system is based on 4 points based on the password entered:

Features

Getting Started

Include plguin files

Just add a link to the css file in your <head>:

<link rel="stylesheet" type="text/css" href="css/passtrength.css"/>

Then, before your closing <body> tag add:

<script type="text/javascript" src="js/jquery.passtrength.min.js"></script>

Package Managers

# NPM
npm install passtrength 

initialize the plugin

Once the necessary files are included you will have to initialize the plugin. The basic way will be;

$('#myPassword').passtrength();

If you need modify the options:

$('#myPassword').passtrength({
  minChars: 8,
  passwordToggle: true,
  tooltip: true,
  textWeak: "Weak",
  textMedium: "Medium",
  textStrong: "Strong",
  textVeryStrong: "Very Strong",
  eyeImg : "img/eye.svg"
});

Settings

Option Type Default Description
minChars int 8 Defines the minimum characters that the user must enter
passwordToggle boolean true Enable the show/hide password option
eyeImg string "img/eye.svg" Path to the image to show/hide password option
tooltip boolean true Enable the tooltip message option
textWeak string "Weak" Custom text for the "weak" status
textMedium string "Medium" Custom text for the "medium" status
textStrong string "Strong" Custom text for the "strong" status
textVeryStrong string "Very Strong" Custom text for the "very-strong" status