js password strength real-time detection code_javascript skills

Judgement of password strength is something that must be done when registering a website user. Different websites implement it in different ways.
Password judgment is actually one of the aspects of form verification. Let’s implement such a simple operation.

First make a simple password input box and a progress bar showing the password strength. The whole thing is covered by the vali_pass box. This box contains the title, password box. The third one is the strength progress bar.

<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>

Let’s use CSS to beautify it

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

What we need to consider at this time is that this progress bar may have several states. What state is displayed when the level is low, what state is displayed when the level is medium, and what state is displayed when the level is high.
OK, when we use it here, we control the width and background color of the box inside the progress bar. Set it to three styles

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

In this way, the HTML structure and CSS beautification are completed. Next we will do JS monitoring.

The first thing that is indispensable is to add text input monitoring to the password input box

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

The password judgment must be processed within this event. But before processing, we have to initialize some data. For example, the regular expression for password judgment.

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

I used three regular rules here to judge the matching degree of the password in sequence. After the data initialization is completed, the onkeyup event is processed. The first is to get the value of the input box, and then its length. We control the length here to be at least 6 characters. sec As an increase in security. Each time an expression in the regular match is matched, sec++ indicates the security of the password. Then it is converted into a value within 100 of the password. This value can be conveniently used to control the width of the internal progress bar.

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

After the progress bar width is controlled, we cannot see the effect of the progress bar for the time being. Look at the previous CSS code. The default background is transparent. Then we have to control different security values ​​and its background color. Control. The following code is used to control its background color.

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

Last JS code:

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

}

Then let’s take a look at our effects:

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.