パスワード強度メーター
入力中のパスワードの強さを、色付きの横バーとラベルでリアルタイムに見せるメーターです。 input イベントで文字を拾い、長さ 8 文字以上・大文字あり・数字あり・記号ありの 4 条件をそれぞれ加点します。
解説
入力中のパスワードの強さを、色付きの横バーとラベルでリアルタイムに見せるメーターです。input イベントで文字を拾い、長さ 8 文字以上・大文字あり・数字あり・記号ありの 4 条件をそれぞれ加点します。スコアに応じてバーの幅を 25% 刻みで伸ばし、色を赤→黄→緑へ切り替え、「弱い／普通／強い／とても強い」のラベルを更新します。バーの伸縮は transition で滑らかに動きます。
使う場面
- 新規会員登録のパスワード設定欄
- マイページのパスワード変更フォーム
- 安全なパスワードを促したい管理画面
判定条件は単純な正規表現なので、求める強度に合わせて最低文字数を増やす、よくある単語を弾く等の調整が容易です。注意点として、これはあくまで利用者への目安表示であり、本当の検証はサーバー側でも必ず行ってください。色だけで強弱を伝えると色覚に配慮できないため、ラベルの文言を併記している点が親切設計です。空欄のときはバーを 0 に戻すので初期状態も自然です。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
判定の条件はどこで変えますか。
JavaScript 内で長さ・大文字・数字・記号を加点している箇所を編集します。最低文字数を 10 に上げたり、条件を増やして満点の基準を厳しくすることができます。
色だけでなく文字でも強さを伝えられますか。
このサンプルはバーの下に「弱い」「強い」などのラベルを必ず表示しています。色が見えにくい人にも伝わるよう、文言の併記を残しておくことをおすすめします。