jQuery.pwdMeasure.jsはパスワードの強度を測定するjQueryプラグインです。
主な特徴は下記の通りです。
いつも通りscriptタグで読み込む方法以外に、Bowerとnpmでのインストールをサポートしています。
$ npm install jquery-pwd-measure
$ bower install jquery-pwd-measure
<script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./jquery.pwdMeasure.min.js"></script>
<input type="password" id="pm-input" value="" placeholder="Your Password">
<div id="pm-indicator"></div>
$(document).ready(function(){
$("#pm-input").pwdMeasure();
});
最も基本的な使い方です。単一の入力フィールドに対して、強度判定を行ないます。
デフォルトで#pm-indicatorに強度が表示されます。
$("#pm-input").pwdMeasure();
confirmオプションで確認用のフィールドを指定した例です。確認用のフィールドがある場合は、値が一致しているかのチェックも行ないます。
$("#pm-input2").pwdMeasure({
indicator: "#pm-indicator2",
confirm: "#pm-input-confirm2"
});
表示ラベルを変更する例です。
$("#pm-input3").pwdMeasure({
indicator: "#pm-indicator3",
indicatorTemplate: "<%= label %>",
labels: [
{score:10, label:"Level 1", className:"very-weak"},
{score:30, label:"Level 2", className:"weak"},
{score:50, label:"Level 3", className:"average"},
{score:70, label:"Level 4", className:"strong"},
{score:100, label:"Max!!", className:"very-strong"}
]
});
強度判定を行うタイミングを決める為のイベントを変更することが出来ます。下記ではchangeのみに絞っています。
$("#pm-input4").pwdMeasure({
indicator: "#pm-indicator4",
events: "change"
});
コールバックを使用して、パスワードが一定の強度より低い場合はフォームの送信を止める例です。
下記では強度を示すパーセントが50以下の場合送信をキャンセルします。
var $form = $("#pm-form5");
// submitイベントをキャンセル
function formCancelSubmit(){
$form.off("submit").on("submit", function(e){
alert("パスワードが一致しないか基準値に達していません！");
e.preventDefault();
});
}
formCancelSubmit();
// コールバックを使用する
$("#pm-input5").pwdMeasure({
minScore: 50,
confirm: "#pm-confirm5",
indicator: "#pm-indicator5",
onValid: function(percentage, label, className){
$form.off("submit");
},
onInvalid: function(percentage, label, className){
formCancelSubmit();
}
});
オプションを指定せずに実行した場合、下記のオプションが適用されます。各オプションの詳細はリポジトリにてご確認下さい。
$(selector).pwdMeasure({
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
});
jQuery.pwdMeasure.jsでは、スタイルを柔軟に設定することが出来ます。
このページで強度表示に使用しているスタイルは次のとおりです。是非参考にしてみてください。
.pm-indicator {
margin:10px 0;
padding:1.5em 1em;
color:#2c3e50;
font-size:12px;
text-align:center;
border:1px solid #ccc;
border-radius:2px;
background:#e4e4e4;
text-shadow:1px 1px 0 rgba(255,255,255,.8);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
.pm-indicator.very-weak,
.pm-indicator.not-match {
border-color:#be1d30;
background-color:#ffc3cf;
}
.pm-indicator.weak {
border-color:#ff787d;
background-color:#ffe6e5;
}
.pm-indicator.strong {
border-color:#78bc42;
background-color:#bceea6;
}
.pm-indicator.very-strong {
border-color:#4f85a7;
background-color:#68c6d7;
}
.pm-indicator {
margin:10px 0;
padding:1.5em 1em;
background:#e4e4e4;
border:1px solid #ccc;
border-radius:2px;
color:#2c3e50;
font-size:12px;
text-shadow:1px 1px 0 rgba(255, 255, 255, .8);
text-align:center;
transition:all .2s ease-in-out;
&.very-weak,
&.not-match {
background-color:#ffc3cf;
border-color:#be1d30;
}
&.weak {
background-color:#ffe6e5;
border-color:#ff787d;
}
&.average {
}
&.strong {
background-color:#bceea6;
border-color:#78bc42;
}
&.very-strong {
background-color:#68c6d7;
border-color:#4f85a7;
}
}
非推奨になっていた.size()を.lengthに変更。(#1)
IE8以下で起きるエラーの修正。(labels内のclassをclassNameに変更しています)
bowerを使ったインストールに対応 & emptyオプションの追加
First Release.