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
HTML
JavaScript
;
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
確認用のフィールドを指定します。確認用フィールドを指定することで、 パスワードが一致しているかどうかの判定も行ないます。
Callbacks
onValid
Default: false
Type: function
強度がminScore
の値を上回ったらコールされます。
onInvalid
Default: false
Type: function
強度がminScore
の値を上回った後、再びminScore
よりも低い値になった際にコールされます。
onNotMatch
Default: false
Type: function
メインの入力フィールドと、確認用フィールドの値が異なる際にコールされます。
毎回のイベント時に呼ばれるのでは無く、内部的なステータス値が変更されたタイミングを採用します。
onEmpty
Default: false
Type: function
メインの入力フィールドと、確認用フィールドのどちらも値が空の時コールされます。
onChangeState
Default: false
Type: function
onValid
, onInvalid
, onNotMatch
のタイミングでコールされます。
onChangeValue
Default: false
Type: function
パスワードの値が変更される度にコールされます。
※実際の値の変化では無く、events
オプションで指定したイベント実行の度にコールされます。
CSS Example
jQuery.pwdMeasure.js
では、スタイルを柔軟に設定することが出来ます。
このページで強度表示に使用しているスタイルは次のとおりです。是非参考にしてみてください。
CSS
Scss
.pm-indicator
Dependencies
jQuery 1.7.2 +
TODO
以下、優先順位順。
テストを書くデモページの移行 (Github上に作成)- コールバックとは別にイベントを提供する
- 文字列から、強度を測定するグローバルAPIを提供
- CSSのテーマを作成 (オプションで選択できるようにする予定)
Licence
Released under the MIT Licence