The ultimate jQuery password input plugin. Featuring secure strength indicator and hide/show password
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.
For a demo visit http://git.aaronlumsden.com/strength.js/
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
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.js"></script>
<script type="text/javascript" src="js.js"></script>
You must give your password input a unique ID.
<input id="myPassword" type="password" name="" value="">
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'
});
</tbody>
</table>
Variable | Default Value | Description | Valid Options |
---|---|---|---|
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 | |
showPasswordToggle | true | Enable or disable the show password button | true or false |