password strength library js

Subject:

refer: http://git.aaronlumsden.com/strength.js/#documentation

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.

The password secuirty indicator is marked on 4 scores. These are

  • Password must contain 8 characters or more
  • Password must contain 1 lowercase letter
  • Password must contain 1 uppercase letter
  • Password must contain 1 number

..:: Getting Started

Include the relevant files

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

<link href='strength.css' rel='stylesheet' type='text/css'> <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.js"></script>

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

VariableDefault ValueDescriptionValid Options

strengthClassstrengthThe CSS class that you want your input field to have

strengthMeterClassstrength_meterThe CSS class that you want your input field to have

strengthButtonClassbutton_strengthThe CSS class that you want the toggle button to have

strengthButtonTextShow PasswordThe text that you want to show for the toggle button

strengthButtonTextToggleHide PasswordThe toggled text that you want to show for the toggle button

2015-09-24 13:05:24gstlouis