パスワード強度チェッカー

ユーザーによって入力されたパスワードの強度（推定されやすいか否か）を判定して表示する機能です。

この機能を活用することで、会員制サイトのようなユーザー自身でパスワードを設定する必要がある場面で、推測されにくいパスワードを設定してもらいやすくすることができます。

デモ

以下のようなパスワード強度チェッカーが実装できます。

使い方

パスワード入力用の input 要素を囲む要素の class 属性に js-password_strength を設定します。

そして、パスワード入力用の input 要素及び、パスワードの強度判定結果を表示する要素、パスワードの強度判定結果を文字列で表示する要素の class 属性に js-input 及び、 js-meter 、 js-label を設定してください。

以下は、パスワード強度チェッカーを実装する最低限のサンプルコードです。

<div class="js-password_strength">
  <input
    type="password"
    name="pass"
    value=""
    id="input-text-pass"
    class="js-input"
    autocomplete="new-password"
  >
  <div>
    <div class="js-meter acms-password-strength-meter"></div>
  </div>
  <span class="js-label acms-password-strength-label" aria-live="assertive"></span>
</div>

設定

この機能の設定は、/js/config.js で設定されています。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。