Strength.js

The ultimate jQuery password input plugin. Featuring secure strength indicator and hide/show password

Documentation

Strength.js provides a toggle feature for password input fields that allows the user to view or asterisk the password. It also features a strength indicator to show how secure a users password is.

..:: Demo

For a demo visit http://git.aaronlumsden.com/strength.js/

The password security indicator is marked on 4 scores. These are calculated by the following algorithm:

Calculate bit strength by counting all unique characters and apply binary logarithm on it
Amplify that bit strength according to different password guidelines
Containing uppercase characters: +50%
Containing lowercase characters: +20%
Containing numbers: +20%
Containing special chars: +50%
As a final step the binary logarithm of the length of the password is calculated and multiplied with the bit strength
Now we've got this four scores:
>= 40.0: Strong password
>= 20.0: Medium password
>= 15.0: Weak password
> 0.0: Very weak password

..:: Getting Started

Include the relevant files directly

Firstly include jQuery and the strength.css and strength.js files. Place these before </head> section

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="strength.min.js"></script>

Installation with bower

bower install strength.js

Installation with rails

This package is distributed via rails-assets.org

source 'https://rails-assets.org'
gem 'rails-assets-strength.js'

And include the javascript file in application.js like this:

//= require strength.js

application.css:

*= require strength.js/src/strength

Create a password input field

You must give your password input a unique ID.

<input id="myPassword" type="password" name="" value="">

Initiate the plugin

Once you have created your password input field you will need to initiate the plugin.

At its most basic level you can initiate the plugin like:

$(document).ready(function() {
    $("#myPassword").strength();
});

If you want to initiate the plugin with options then you can do so like:

$('#myPassword').strength({
        strengthClass: 'strength',
        strengthMeterClass: 'strength_meter',
        strengthButtonClass: 'button_strength',
        strengthButtonText: 'Show password',
        strengthButtonTextToggle: 'Hide Password'
    });

..:: Options

						</tbody>
					</table>

Variable	Default Value	Description
strengthClass	strength	The CSS class that you want your input field to have
strengthMeterClass	strength_meter	The CSS class that you want your input field to have
strengthButtonClass	button_strength	The CSS class that you want the toggle button to have
strengthButtonText	Show Password	The text that you want to show for the toggle button
strengthButtonTextToggle	Hide Password	The toggled text that you want to show for the toggle button

slavikko/Strength.js