jQuery Password Strength Checker Plugin - pStrength

pStrength is a simple and easy-to-use jquery plugin which is developed to help check the password strength and then display the strength percentage.

Basic Usage:

1. Include both pStrength.js and the latest jQuery library in your header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="pStrength.jquery.js"></script>

2. Markup

<input type="password" id="myElement" />
<div></div>

3. Call the plugin with options

<script>
$(document).ready(function(){
$('#myElement').pStrength({
'changeBackground'          : true,
'onPasswordStrengthChanged' : function(passwordStrength, percentage) {
$('#myElement').next('div').html('Your password strength is ' + percentage + '%.');
},
'onValidatePassword': function(percentage) {
                $('#myElement').next('div').html($('#myElement').next('div').html() + ' Great, now you can continue to register!');
}
});
});
</script>

4. More Options

$('#myElement').pStrength({
    'bind': 'keyup change', // When bind event is raised, password will be recalculated;
    'changeBackground': true, // If true, the background of the element will be changed according with the strength of the password;
    'backgrounds'     : [['#cc0000', '#FFF'], ['#cc3333', '#FFF'], ['#cc6666', '#FFF'], ['#ff9999', '#FFF'],
                        ['#e0941c', '#FFF'], ['#e8a53a', '#FFF'], ['#eab259', '#FFF'], ['#efd09e', '#FFF'],
                        ['#ccffcc', '#FFF'], ['#66cc66', '#FFF'], ['#339933', '#FFF'], ['#006600', '#FFF'], ['#105610', '#FFF']], // Password strength will get values from 0 to 12. Each color in backgrounds represents the strength color for each value;
    'passwordValidFrom': 60, // 60% // If you define a onValidatePassword function, this will be called only if the passwordStrength is bigger than passwordValidFrom. In that case you can use the percentage argument as you wish;
    'onValidatePassword': function(percentage) { }, // Define a function which will be called each time the password becomes valid;
    'onPasswordStrengthChanged' : function(passwordStrength, percentage) { } // Define a function which will be called each time the password strength is recalculated. You can use passwordStrength and percentage arguments for designing your own password meter
});

Change Log:

v1.0.6 (2014-03-02)

• Updated plugin to use multiple elements

v1.0.3 (2013-03-06)

• Added bind option

---

This awesome jQuery plugin is developed by M1Sh0u. For more Advanced Usages, please check the demo page or visit the official website.