パスワードを設定する際に、英字だけだと「弱いよ!」、数字や記号も含めると「いい感じだよ!」と伝えてくれるやつありますよね??
あれを作りましょう、というお話です。
こんにちは、やましょです。
今回作るもの
パスワードを入力すると、入力内容に応じて評価してくれます。

環境
jQuery(3.6.0)
前提
パスワードのチェックの方法や、ロジックなどは多数あります。
その中でも、今回はこちらのサイトの手法を参考に作成いたします。
https://www.formget.com/password-strength-checker-in-jquery/
判定条件
入力された値が、、、
- 文字数
- 記号を使用しているか
- 英字の大文字・小文字を使用しているか
- 数字を使用しているか
上記の条件がtrueであれば強さポイントが加わるような仕組みになっています。
実装内容
$('.js-password').on('keyup', function() {
// 入力値取得
const value = $(this).val();
// 入力値をもとに強度を確認
const result = checkStrength(value);
// 結果を出力
$('.js-result').text(result);
});
const checkStrength = (password) => {
let strength = 0 //強さ
if (password.length < 6) {
return '短すぎる!!'
}
// 文字数が7より大きいければ+1
if (password.length > 7) strength += 1
// 英字の大文字と小文字を含んでいれば+1
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
// 英字と数字を含んでいれば+1
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
// 記号を含んでいれば+1
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
// 記号を2つ含んでいれば+1
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
// 点数を元に強さを計測
if (strength < 2) {
return '弱いです〜'
} else if (strength == 2) {
return '良い感じ!!'
} else {
return '強いです!!'
}
}
最後に
こちらから実際のソースコードと動きを確認することができますので、実際に触ってみてください。
See the Pen 【JavaScript】Checking Password Strength by Syohei Yamaki (@syohei-yamaki) on CodePen.