HTML
<form action="#" method="post">
<label for="field">Password:</label><br>
<input type="password" id="field" data-indicator="pwindicator">
<div id="pwindicator">
<div class="bar"></div>
<div class="label"></div>
</div>
</form>
The data-indicator attribute on the password field specifies which element is used as indicator.
JavaScript
jQuery(function($) {
$('#field').pwstrength();
});
You can also check the password manually by calling
$.pwstrength
label
The Selector for the label element within the indicator container.
Default: .label
classes
The CSS classes which get added for each strength level.
Default: ['pw-very-weak', 'pw-weak', 'pw-mediocre', 'pw-strong', 'pw-very-strong']
texts
The texts that get inserted into the label for each strength level.
Default: ['very weak', 'weak', 'mediocre', 'strong', 'very strong']
jQuery 1.5 or higher
You can download this project in either zip or tar formats.
You can also clone the project with Git by running:
$ git clone git://github.com/matoilic/jquery.pwstrength
Copyright © 2012 Mato Ilic
jquery.pwstrength is dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html