パスワード強度を表示するjQueryプラグインを使ってみた

ユーザが入力したパスワードの強度を判定して表示するjQueryプラグインを見つけた。
使い勝手が良さそうなので自社アプリに組み込んでみた。

PwdMeasure というプラグインで GitHub から入手できる。
以下に特徴を引用する。

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

使い方は公式ドキュメントを参照してもらうとして、組み込み方法を簡単に説明する。

HTML

パスワードを入力する<input>要素に、強度を表示する要素を付け足すだけ。

<p id="pm-indicator" class="pm-indicator"></p>
<div class="form-group">
    <label for="passwd" class="control-label col-sm-4">新しいパスワード：</label>
    <div class="col-sm-8">
        <input type="password" id="passwd" name="passwd" value="" class="form-control" autofocus>
    </div>
</div>

最近のブラウザは、テキストボックスの下にドロップダウンリストで入力候補を表示するため、強度を表示する要素はテキストボックスの上に配置した方が良さそうだ。

JavaScript

jQueryの後にjquery.pwdMeasure.min.jsを追加し、先ほどの<input>要素に対してpwdMeasureを実行するだけ。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://localhost:8000/js/jquery.pwdMeasure.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#passwd').pwdMeasure();
});
</script>

CSSは公式のサンプルをそのまま使わせて頂いた。