jquery-pwd-measure

パスワードの強度を測定して表示するためのjQueryプラグインです。

Demo

http://tsuyoshiwada.github.io/jquery-pwd-measure/

Features

PwdMeasureの特徴は下記のとおりです。

パスワードの強度をパーセント表示可能
単一の入力フィールド、確認フィールドへの対応
強度を示すラベルを詳細に設定可能
必要最低限のパスワード強度をパーセント指定可能
判定をクリアした時、値が変わった時などのコールバックをサポート
スタイルシートで自由にデザインを変更可能

How To Use

npm

$ npm install jquery-pwd-measure --save

Bower (非推奨:更新予定無)

$ bower install jquery-pwd-measure --save

Basic

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.pwdMeasure.min.js"></script>

HTML

<input type="password" id="pwd" name="pwd" value="" placeholder="Your Password">
<p id="pm-indicator"></p>

JavaScript

$(document).ready(function(){
    $("#pwd").pwdMeasure();
});

Options

Defaults

// Default Options
{
  minScore: 50,
  minLength: 6,
  events: "keyup change",
  labels: [
    {score:10,         label:"とても弱い", className:"very-weak"},   //0~10%
    {score:30,         label:"弱い",       className:"weak"},        //11~30%
    {score:50,         label:"平均",       className:"average"},     //31~50%
    {score:70,         label:"強い",       className:"strong"},      //51~70%
    {score:100,        label:"とても強い", className:"very-strong"}, //71~100%
    {score:"notMatch", label:"不一致",     className:"not-match"},   //not match
    {score:"empty",    label:"未入力",     className:"empty"}        //empty
  ], 
  indicator: "#pm-indicator",
  indicatorTemplate: "パスワード強度: <%= label %> (<%= percentage %>%)",
  confirm: false,
 
  // Callbacks
  onValid: false,
  onInvalid: false,
  onNotMatch: false,
  onEmpty: false,
  onChangeState: false,
  onChangeValue: false
}

minScore

Default: 50
Type: integer

最低限必要な強度を0~100のパーセントで指定します。

minLength

Default: 6
Type: integer

最低限必要な文字数を指定します。
ここで指定した文字数とminScoreの値から入力されたパスワードの強度を求めます。

events

Default: keyup change
Type: string

指定したイベントで強度判定を行います。

labels

Type: array
Default:

強度を示すラベルを配列で指定します。

[
  {score:10,         label:"とても弱い", className:"very-weak"},   //0~10%
  {score:30,         label:"弱い",       className:"weak"},        //11~30%
  {score:50,         label:"平均",       className:"average"},     //31~50%
  {score:70,         label:"強い",       className:"strong"},      //51~70%
  {score:100,        label:"とても強い", className:"very-strong"}, //71~100%
  {score:"notMatch", label:"不一致",     className:"not-match"},   //not match
  {score:"empty",    label:"未入力",     className:"empty"}        //empty
]

キーに対応する役割は下記のとおりです。 indicatorオプションを指定した場合、自動的にラベル、クラスが適用されます。
また、コールバック内で取得出来ます。

score: 該当する範囲をパーセント(整数)指定 0~100 or "notMatch"
label: 対応するラベル string
className: 対応するクラス名 string

scoreには例外が存在します。それぞれのルールは下記のとおりです。

key	rule
`"notMatch"`	メイン、確認用フィールドの値が違う場合
`"empty"`	メイン、確認用フィールドのどちらも空の場合

indicator

Type: string | jQueryObj | DOM Elements
Default: #pm-indicator

強度を示すラベルを表示する要素を指定します。

indicatorTemplate

Type: string | jQueryObj | DOM Elements
Default: パスワード強度: <%= label %> (<%= percentage %>%)

強度を示すラベルを表示する<%= キー %>形式で指定します。
使用できるキーは下記です。

label
className
percentage

confirm

Type: string | jQueryObj | DOM Elements
Default: false

確認用のフィールドを指定します。確認用フィールドを指定することで、パスワードが一致しているかどうかの判定も行ないます。