JavaScript regular verification password strength

index.html

<div id="dv">
  <label for="password">Password</label>
  <input type="text" id="password" maxlength="16"><!--Extracurricular topics-->
  <div>
    password strength:
    <em id="strength"></em>
    <div id="strengthLevel" class="strengthLv0"></div>
  </div>
</div>

javascript-regular-verification-password-strength.markdown

JavaScript regular verification password strength

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

function my$(id) {
  return document.getElementById(id);
}

//Get the text box to register the keyboard up event
my$("password").onkeyup=function () {
  //Get the content in the text box every time the keyboard is lifted, verify what is in the text box, get a level, and then the div below displays the corresponding color
  my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
};

//Give me the password, I return to the corresponding level
function getLvl(password) {
  var lvl=0;//The default is level 0
  //Whether there are numbers, letters, or special symbols in the password
  if(/[0-9]/.test(password)){
    lvl++;
  }
  // Determine whether there are letters in the password
  if(/[a-zA-Z]/.test(password)){
    lvl++;
  }
  //Determine whether there are special symbols in the password
  if(/[^0-9a-zA-Z_]/.test(password)){
    lvl++;
  }
  return lvl;//The minimum value is 1, the maximum value is 3
}

style.css

#dv{
  width: 300px;
  height:200px;
  position: absolute;
  left:100px;
  top:100px;
}
.strengthLv0 {
  height: 6px;
  width: 120px;
  border: 1px solid #ccc;
  padding: 2px;
}

.strengthLv1 {
  background: red;
  height: 6px;
  width: 40px;
  border: 1px solid #ccc;
  padding: 2px;
}

.strengthLv2 {
  background: orange;
  height: 6px;
  width: 80px;
  border: 1px solid #ccc;
  padding: 2px;
}

.strengthLv3 {
  background: green;
  height: 6px;
  width: 120px;
  border: 1px solid #ccc;
  padding: 2px;
}