🔑 A password strength meter for jQuery
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist Update dist files [skip ci] May 21, 2017
src
test
.codeclimate.yml
.editorconfig
.eslintrc.yml
.gitignore
.travis.yml
LICENSE.md
README.md
bower.json
build.sh
gulpfile.js
package.json

README.md

Password Strength Meter plugin for jQuery

Build status Code coverage License Latest stable version Total downloads Code climate jsDelivr CDN

Sauce labs

A password strength meter for jQuery. Give it a try!

password example

Installation

Using npm

npm install --save password-strength-meter

Using bower

bower install --save password-strength-meter

Or much better, using yarn

yarn add password-strength-meter

For manual installations check out the releases section for tarballs.

Usage

Import the required scripts:

<script src="./js/password-strength-meter/password.min.js"></script>
<script src="./js/password-strength-meter/password.min.css"></script>

Ensure your password field has a wrapper div, like in Bootstrap:

<div class="form-group">
  <label for="password">
    Password
  </label>
  <input id="password" type="password" class="form-control" />
</div>

And call the plugin when you wanna enable it:

$('#password').password({ /* options */ });

Available options

Here's the list of available options you can pass to the password plugin:

$('#password').password({
  shortPass: 'The password is too short',
  badPass: 'Weak; try combining letters & numbers',
  goodPass: 'Medium; try using special charecters',
  strongPass: 'Strong password',
  containsUsername: 'The password contains the username',
  enterPass: 'Type your password',
  showPercent: false,
  showText: true, // shows the text tips
  animate: true, // whether or not to animate the progress bar on input blur/focus
  animateSpeed: 'fast', // the above animation speed
  username: false, // select the username field (selector or jQuery instance) for better password checks
  usernamePartialMatch: true, // whether to check for username partials
  minimumLength: 4 // minimum password length (below this threshold, the score is 0)
});

Events

There are two events fired by the password plugin:

$('#password').on('password.score', (e, score) => {
  console.log('Called every time a new score is calculated (this means on every keyup)')
  console.log('Current score is %d', score)
})

$('#password').on('password.text', (e, text, score) => {
  console.log('Called every time the text is changed (less updated than password.score)')
  console.log('Current message is %s with a score of %d', text, score)
})

Compatiblity

This plugin was originally created in 2010 for jQuery 1.14, and the current relase has been tested under jQuery 1, 2 & 3.

It should work in all browsers (even IE 666).

compatibility chart

Testing

First you'll need to grab the code, as the npm version does not come with the source files:

git clone https://github.com/elboletaire/password-strength-meter.git
cd password-strength-meter
npm install
npm test

Note: tests are just run using jQuery 3.

Why?

Why another library? Well, I found this on March 11th (of 2017) cleaning up my documents folder and noticed I made it in 2010 and never published it, so I decided to refactor it "a bit" (simply remade it from the ground-up) and publish it, so others can use it.

Credits

Created by Òscar Casajuana .

Based on unlicensed work by Firas Kassem, published in 2007 and modified by Amin Rajaee in 2009.

This code is licensed under a GPL 3.0 license.