jQuery Password Strength Indicator

Example

Code

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

Options

• 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']

Requirements

jQuery 1.5 or higher

Supported Browsers

• Firefox 3+
• Safari 3+
• Chrome 10+
• Opera 9+
• Internet Explorer 6+

Download

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

Licence

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