jsパスワード強度リアルタイム検出コード_javascriptスキル

パスワードの強度の判断は、Web サイトのユーザーを登録するときに実行する必要があります。Web サイトによって実装方法が異なります。
パスワード判定は実際にはフォーム検証の一部です。このような簡単な操作を実装してみましょう。

まず、単純なパスワード入力ボックスと、パスワードの強度を示す進行状況バーを作成します。このボックスには、タイトルとパスワードの強度の進行状況バーが含まれています。

<div class="vali_pass">
  <h3>简单的密码强度检测</h3>
  <input type="password" name="pass">
  <div class="vali_pass_progress">
    <span class="vali_pass_inner_progress"></span>
  </div>
</div>

CSSを使って美しくしてみよう

.vali_pass {
  width: 350px;
  margin: 0 auto;
  padding: 10px;
  border: #eee 1px solid;
  text-align: center;
}
.vali_pass input {
  width: 96%;
  display: block;
  margin: 0;
  padding: 5px;
  font-size: 14px;
  line-height: 20px;
}
.vali_pass_progress {
  margin-top: 10px;
  background-color: #efefef;
  height: 10px;
  border-radius: 5px;
}
.vali_pass_inner_progress {
  display: block;
  height: 100%;
  background-color: transparent;
  border-radius: 5px;
  width: 100%;
}

このとき考慮する必要があるのは、このプログレスバーには、レベルが低い場合にはどのような状態が表示され、レベルが中程度の場合にはどのような状態が表示されるか、レベルが高い場合にはどのような状態が表示されるかということが考えられるということです。高いです。
OK、ここで使用するときは、プログレスバー内のボックスの幅と背景色を制御します。
のスタイルに設定します。

.error {
 background-color: #ff3300;
}
.middle {
 background-color: gold;
}
.strong {
 background-color: green;
}

これで HTML 構造と CSS の美化が完了しました。

では、JS のモニタリングを行ってみましょう。

最初に欠かせないのは、パスワード入力ボックスにテキスト入力監視を追加することです

ele_pass.onkeyup = function () {...}

パスワード判定はこのイベント内で処理する必要がありますが、処理の前にパスワード判定用の正規表現などを初期化する必要があります。

var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);

ここでは、パスワードの一致度を順番に判断するために 3 つの規則を使用しました。データの初期化が完了した後、最初は入力ボックスの値を取得し、次にその長さを取得します。ここでの長さは少なくとも 6 文字になるように制御します。セキュリティを強化するため、正規一致の式が一致するたびに、パスワードのセキュリティを 100 以内の値に変換します。この値は、内部進行状況バーの幅を制御するために便利に使用できます。

ele_pass.onkeyup = function () {
  var val = this.value;
  var len = val.length;
  var sec = 0;
  if (len >= 6) { // 至少六个字符
    for (var i = 0; i < regxs.length; i++) {
      if (val.match(regxs[i])) {
        sec++;
      }
    }
  }
  var result = (sec / regxs.length) * 100;
  ele_progress.style.width = result + "%";
}

プログレスバーの幅を制御した後は、当面はプログレスバーの効果を確認できません。デフォルトの背景は透明になっています。背景色を制御します。次のコードを使用して背景色を制御します。

if(result > 0 && result <= 50){
  ele_progress.setAttribute("class",begin_classname + " error");
}else if (result > 50 && result < 100) {
  ele_progress.setAttribute("class",begin_classname + " middle");
} else if (result == 100) {
  ele_progress.setAttribute("class",begin_classname + " strong");
}

最後の JS コード:

var ele_pass = document.getElementsByTagName("input")[0];
var ele_progress = document.getElementsByClassName("vali_pass_inner_progress")[0];
var begin_classname = ele_progress.className;
var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);

ele_pass.onkeyup = function () {
  var val = this.value;
  var len = val.length;
  var sec = 0;
  if (len >= 6) { // 至少六个字符
    for (var i = 0; i < regxs.length; i++) {
      if (val.match(regxs[i])) {
        sec++;
      }
    }
  }
  var result = (sec / regxs.length) * 100;
  ele_progress.style.width = result + "%";
  if(result > 0 && result <= 50){
    ele_progress.setAttribute("class",begin_classname + " error");
  }else if (result > 50 && result < 100) {
    ele_progress.setAttribute("class",begin_classname + " middle");
  } else if (result == 100) {
    ele_progress.setAttribute("class",begin_classname + " strong");
  }

}

それでは、その効果を見てみましょう:

以上がこの記事の全内容です。JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。