jQuery.pwdMeasure.jsはパスワードの強度を測定するjQueryプラグインです。
主な特徴は下記です。
$ 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="pwd" name="pwd" value="" placeholder="Your Password">
<p id="pm-indicator"></p>$(document).ready(function(){
$("#pwd").pwdMeasure();
});最も基本的な使い方です。単一の入力フィールドに対して、強度判定を行ないます。
Code
$("#pm-input").pwdMeasure();confirmオプションで確認用のフィールドを指定した例です。確認用のフィールドがある場合は、値が一致しているかのチェックも行ないます。
Code
$("#pm-input2").pwdMeasure({
indicator: "#pm-indicator2",
confirm: "#pm-input-confirm2"
});表示ラベルを変更する例です。
Code
$("#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のみに絞っています。
Code
$("#pm-input4").pwdMeasure({
indicator: "#pm-indicator4",
events: "change"
});コールバックを使用して、パスワードが一定の強度より低い場合はフォームの送信を止める例です。
下記では強度を示すパーセントが50以下の場合送信をキャンセルします。
Code
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-input-confirm5",
indicator: "#pm-indicator5",
onValid: function(percentage, label, className){
$form.off("submit");
},
onInvalid: function(percentage, label, className){
formCancelSubmit();
}
});オプションを指定せずに実行した場合、下記のオプションが適用されます。各オプションの詳細はGithubにてご確認下さい。
$("#pm-input").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
});
labels内のclassをclassNameに変更しています)emptyオプションの追加