jquery.hippo-password-strength.js

hippo password strength checker.

Demo

Demo page is here.

Installation

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

Example Usage

HTML

<input class="password" type="password" size="30" name="params[password]" value="" data-indicator="strengthLevel">
<img id="strengthLevel" class="password_strength1">

CSS

.password_strength1 {
  width: 150px;
  height: 22px;
  background-image: url("images/strength_1.gif");
}

.password_strength2 {
  width: 150px;
  height: 22px;
  background-image: url("images/strength_2.gif");
}

.password_strength3 {
  width: 150px;
  height: 22px;
  background-image: url("images/strength_3.gif");
}

.password_strength4 {
  width: 150px;
  height: 22px;
  background-image: url("images/strength_4.gif");
}

jQuery

Use the plugin as follows:

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

// Custom indicator prefix
//
// For example
// level1: <img id="strengthLevel" class="pass_state01">
// level2: <img id="strengthLevel" class="pass_state02">
// ...
$('.password').hippoPasswordStrength({
    indicator_prefix: "pass_state0"
});

Thanks to…

• @kihaco
• @gyugyu
• @kitak

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.