パスワード強度チェッカー
ユーザーによって入力されたパスワードの強度（推定されやすいか否か）を判定して表示する機能です。
この機能を活用することで、会員制サイトのようなユーザー自身でパスワードを設定する必要がある場面で、推測されにくいパスワードを設定してもらいやすくすることができます。
デモ
以下のようなパスワード強度チェッカーが実装できます。
使い方
パスワード入力用の 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について：設定を編集する」を参照してください。
| 設定項目 | 説明 | デフォルト |
|---|---|---|
| passwordStrengthMark | パスワード入力用の input 要素を囲む要素をセレクター形式で設定します。 | '.js-password_strength' |
| passwordStrengthInputMark | パスワード入力用の input 要素をセレクター形式で設定します。 | '.js-input' |
| passwordStrengthMeterMark | パスワードの強度判定結果を表示する要素をセレクター形式で設定します。 | '.js-meter' |
| passwordStrengthLabelMark | パスワードの強度判定結果を文字列で表示する要素をセレクター形式で設定します。 | '.js-label' |
| passwordStrengthMessage | passwordStrengthLabelMark で設定した要素に表示する文字列を設定します。 0 ~ 4 の5段階で設定可能で、数字が大きいほど推測しにくいパスワードであることを示します。 |