JavaScript 定期検証パスワード強度実装方法

展示する

デザイン

パスワード強度分析

パスワードは数字、文字、特殊記号で構成されています

パスワード: 数字のみ - または文字のみ、または特殊記号のみ - レベル 1: 弱い
2 対 2 の組み合わせ: 数字と文字、数字と特殊記号、文字と特殊記号 - レベル 2: 中級
3つすべて: 数字、文字、特殊記号 - レベル3: 強い

コード

バージョン 1: 基本

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>ドキュメント</title>
</head>
<スタイル タイプ="text/css">
  #dv{
    幅: 300ピクセル;
    高さ:200px;
    位置: 絶対;
    左:100px;
    上:100ピクセル;
  }
  .強さLv0 {
    高さ: 6px;
    幅: 120ピクセル;
    境界線: 1px 実線 #ccc;
    パディング: 2px;
  }

  .強さLv1 {
    背景: 赤;
    高さ: 6px;
    幅: 40px;
    境界線: 1px 実線 #ccc;
    パディング: 2px;
  }

  .強さLv2 {
    背景: オレンジ;
    高さ: 6px;
    幅: 80ピクセル;
    境界線: 1px 実線 #ccc;
    パディング: 2px;
  }

  .強さLv3 {
    背景: 緑;
    高さ: 6px;
    幅: 120ピクセル;
    境界線: 1px 実線 #ccc;
    パディング: 2px;
  }
</スタイル>
<本文>
<div id="dv">
  <label for="password">パスワード</label>
  <input type="text" id="パスワード" 最大長="16">
  <div>
    <b>パスワードの強度:</b>
    <em id="強さ"></em>
    <div id="強度レベル" class="強度Lv0"></div>
  </div>
</div>
<スクリプト>
  関数 my$(id) {
      document.getElementById(id) を返します。
  }

<スクリプト>


 //キーボードアップイベントを登録するためのテキストボックスを取得します。my$("password").onkeyup=function () {
   //キーボードが持ち上げられるたびに、テキスト ボックスの内容を取得し、テキスト ボックスの内容を確認してレベルを取得し、下の div に対応する色を表示します。//パスワードの長さが 6 未満の場合、判断する必要はありません if (this.value.length>=6) {
     var lvl = getLvl(this.value);
     if(レベル==1){
       //弱い my$("strengthLevel").className="strengthLv1";
     }そうでない場合(レベル==2){
       my$("strengthLevel").className="strengthLv2";
     }そうでない場合(レベル==3){
       my$("strengthLevel").className="strengthLv3";
     }それ以外{
       my$("strengthLevel").className="strengthLv0";
     }
   }それ以外{
     my$("strengthLevel").className="strengthLv0";
   }


 };

 //パスワードを教えていただければ、対応するレベルを返します。関数 getLvl(password) {
   var lvl=0;//デフォルトはレベル0です//パスワードに数字、文字、特殊記号が含まれているかどうか if(/[0-9]/.test(password)){
     レベル++;
   }
   // パスワードに文字が含まれているか確認する if(/[a-zA-Z]/.test(password)){
     レベル++;
   }
   // パスワードに特殊記号が含まれているかどうかを確認します if(/[^0-9a-zA-Z_]/.test(password)){
     レベル++;
   }
   戻り値 lvl;//1 3
 }

</スクリプト>
</本文>
</html>

上記のコードは少し冗長なので、アップグレードして書き直します

バージョン2: アップグレード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>ドキュメント</title>
</head>
<スタイル タイプ="text/css">
  #dv{
    幅: 300ピクセル;
    高さ:200px;
    位置: 絶対;
    左:100px;
    上:100ピクセル;
  }
  .強さLv0 {
    高さ: 6px;
    幅: 120ピクセル;
    境界線: 1px 実線 #ccc;
    パディング: 2px;
  }

  .強さLv1 {
    背景: 赤;
    高さ: 6px;
    幅: 40px;
    境界線: 1px 実線 #ccc;
    パディング: 2px;
  }

  .強さLv2 {
    背景: オレンジ;
    高さ: 6px;
    幅: 80ピクセル;
    境界線: 1px 実線 #ccc;
    パディング: 2px;
  }

  .強さLv3 {
    背景: 緑;
    高さ: 6px;
    幅: 120ピクセル;
    境界線: 1px 実線 #ccc;
    パディング: 2px;
  }
</スタイル>
<本文>
<div id="dv">
  <label for="password">パスワード</label>
  <input type="text" id="password" maxlength="16"><!--課外活動トピック-->
  <div>
    <b>パスワードの強度:</b>
    <em id="強さ"></em>
    <div id="強度レベル" class="強度Lv0"></div>
  </div>
</div>
<!-- <script src="common.js"></script> -->
<スクリプト>
  関数 my$(id) {
      document.getElementById(id) を返します。
  }
  //キーボードアップイベントを登録するためのテキストボックスを取得します。my$("password").onkeyup=function () {
    //キーボードが持ち上げられるたびに、テキスト ボックスの内容を取得し、テキスト ボックスの内容を確認してレベルを取得し、下の div に該当する色を表示します。my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
  };

  //パスワードを教えていただければ、対応するレベルを返します。関数 getLvl(password) {
    var lvl=0;//デフォルトはレベル0です//パスワードに数字、文字、特殊記号が含まれているかどうか if(/[0-9]/.test(password)){
      レベル++;
    }
    // パスワードに文字が含まれているか確認する if(/[a-zA-Z]/.test(password)){
      レベル++;
    }
    // パスワードに特殊記号が含まれているかどうかを確認します if(/[^0-9a-zA-Z_]/.test(password)){
      レベル++;
    }
    return lvl; //最小値は1、最大値は3
  }


</スクリプト>
</本文>
</html>

JavaScript 正規パスワード検証の実装方法についてはこれで終わりです。JavaScript 正規パスワード強度に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: