jquery.hippo-password-strength.js

hippo password strength checker.

Demo

Demo page is here.

Installation

npm

npm install hippo-password-strength

Bower

bower install hippo-password-strength

Example Usage

HTML

<script src="/path/to/jquery.hippo-password-strength.js"></script>

<input class="password" type="password" size="30" name="params[password]" value="" data-indicator="strengthLevel">
<div id="strengthLevel" class="password_strength pass_state01"></div>

CSS

.password_strength  {
  width: 150px;
  height: 22px;
}

.pass_state01 {
  background-image: url("images/strength_1.gif");
}

.pass_state02 {
  background-image: url("images/strength_2.gif");
}

.pass_state03 {
  background-image: url("images/strength_3.gif");
}

.pass_state04 {
  background-image: url("images/strength_4.gif");
}

jQuery

Use the plugin as follows:

$('.password').hippoPasswordStrength();

// Custom indicator prefix
//
// For example
// level1: <div id="strengthLevel" class="password_strength pass_state01"><div>
// level2: <div id="strengthLevel" class="password_strength pass_state02"><div>
// ...

$('.password').hippoPasswordStrength({
    indicator_prefix: "pass_state0"
});

Development & Test

npm install
npm test

Thanks to…

• @kihaco
• @gyugyu
• @kitak
• @f-kubotar

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Added some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

License

This plugin is available under the MIT license.