← 一覧へ

やってみようパスワード欄に文字を打ってみてください

入力フォームメジャー(よく見る)

パスワード強度メーター

Password Strength Meter

パスワードを打つと、下のバーが「弱い(赤)→ 普通(黄)→ 強い(緑)」と伸びて強さを教えてくれる。

別名強度インジケーターパスワードの強さセキュリティメーター

どこで使われている?

よく見かける場所
会員登録、パスワードの変更画面
使うとよい場面
安全なパスワードを作ってもらいたいとき
避けたい場面
条件を細かくしすぎること(覚えにくいパスワードを強いてしまう)

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「パスワード強度メーター(Password Strength Meter)」を実装してください。

動き:パスワード入力欄の下に4つに分かれたバーを置き、長さや数字・記号の有無から強さを判定して、弱いときは赤で1マス、強いほど緑で多くのマスを塗る。足りない条件(「数字を入れる」など)も表示する。

使う部品:自作(判定には zxcvbn ライブラリ)
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら自作(判定には zxcvbn ライブラリ)
iPhoneアプリなら自作
Androidアプリなら自作
Flutterなら自作(password_strength_checker パッケージ)
React Nativeなら自作