js 비밀번호 강도 실시간 감지 code_javascript 기술

비밀번호 강도에 대한 판단은 웹사이트 사용자 등록 시 반드시 수행해야 합니다. 웹사이트마다 비밀번호 강도를 다르게 구현합니다.
비밀번호 판단은 실제로 양식 확인의 측면 중 하나입니다. 이러한 간단한 작업을 구현해 보겠습니다.

먼저 간단한 비밀번호 입력 상자와 비밀번호 강도를 표시하는 진행률 표시줄을 만듭니다. 이 상자에는 제목, 비밀번호 표시줄이 모두 포함됩니다.

<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%;
}

이때 고려해야 할 점은 이 진행률 표시줄에 여러 상태가 있을 수 있다는 것입니다. 레벨이 낮을 때 표시되는 상태, 레벨이 중간일 때 표시되는 상태, 레벨이 높을 때 표시되는 상태입니다. 높습니다.
자, 여기에서 사용하면 진행률 표시줄 내부 상자의 너비와 배경색을 제어합니다.

.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);

여기서는 비밀번호의 일치 정도를 순차적으로 판단하기 위해 세 가지 규칙을 사용했습니다. 데이터 초기화가 완료된 후 먼저 입력 상자의 값을 얻은 다음 그 길이를 가져옵니다. 여기서 길이는 6자 이상이어야 합니다. sec 보안을 강화하기 위해 정규 일치의 표현식이 일치할 때마다 비밀번호의 보안을 나타내는 sec++입니다. 그런 다음 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 + "%";
}

진행률 표시줄의 너비를 조정한 후에는 당분간 진행률 표시줄의 효과를 볼 수 없습니다. 이전 CSS 코드를 보면 기본 배경이 투명하여 다른 보안 값을 조정해야 합니다. 배경색을 제어하려면 다음 코드를 사용합니다.

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");
  }

}

그럼 효과를 살펴보겠습니다.

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.