パスワード強度チェックの簡単3分間実装

パスワードを設定する際に、英字だけだと「弱いよ！」、数字や記号も含めると「いい感じだよ！」と伝えてくれるやつありますよね？？

あれを作りましょう、というお話です。

こんにちは、やましょです。

今回作るもの

パスワードを入力すると、入力内容に応じて評価してくれます。

環境

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 '強いです！!'
  }
}