JavaScript regular verification password strength implementation method

exhibit

design

Password strength analysis

The password consists of numbers, letters, and special symbols

Password: Only numbers - or only letters, or only special symbols - Level 1: Weak
Two-by-two combinations: Numbers and letters, numbers and special symbols, letters and special symbols - Level 2: Medium
All three: Numbers, letters, and special symbols - Level 3: Strong

Code

Version 1: Basic

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style type="text/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;
  }
</style>
<body>
<div id="dv">
  <label for="password">Password</label>
  <input type="text" id="password" maxlength="16">
  <div>
    <b>Password strength:</b>
    <em id="strength"></em>
    <div id="strengthLevel" class="strengthLv0"></div>
  </div>
</div>
<script>
  function my$(id) {
      return document.getElementById(id);
  }

<script>


 //Get the text box to register the keyboard up event my$("password").onkeyup=function () {
   //Each time the keyboard is lifted, the content of the text box must be obtained, and what is in the text box must be verified, and a level must be obtained, and then the div below will display the corresponding color. //If the password length is less than 6, there is no need to judge if (this.value.length>=6) {
     var lvl = getLvl(this.value);
     if(lvl==1){
       //weak my$("strengthLevel").className="strengthLv1";
     }else if(lvl==2){
       my$("strengthLevel").className="strengthLv2";
     }else if(lvl==3){
       my$("strengthLevel").className="strengthLv3";
     }else{
       my$("strengthLevel").className="strengthLv0";
     }
   }else{
     my$("strengthLevel").className="strengthLv0";
   }


 };

 //Give me the password and I will return the corresponding level function getLvl(password) {
   var lvl=0;//Default is level 0//Whether the password contains numbers, letters, or special symbols if(/[0-9]/.test(password)){
     lvl++;
   }
   // Check if there are letters in the password if(/[a-zA-Z]/.test(password)){
     lvl++;
   }
   // Check if there are any special symbols in the password if(/[^0-9a-zA-Z_]/.test(password)){
     lvl++;
   }
   return lvl;//1 3
 }

</script>
</body>
</html>

The above code is a bit redundant, so we upgrade and rewrite it

Version 2: Upgrade

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style type="text/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;
  }
</style>
<body>
<div id="dv">
  <label for="password">Password</label>
  <input type="text" id="password" maxlength="16"><!--Extracurricular Topics-->
  <div>
    <b>Password strength:</b>
    <em id="strength"></em>
    <div id="strengthLevel" class="strengthLv0"></div>
  </div>
</div>
<!-- <script src="common.js"></script> -->
<script>
  function my$(id) {
      return document.getElementById(id);
  }
  //Get the text box to register the keyboard up event my$("password").onkeyup=function () {
    //Each time the keyboard is lifted, get the content in the text box, 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 and I will return the corresponding level function getLvl(password) {
    var lvl=0;//Default is level 0//Whether the password contains numbers, letters, or special symbols if(/[0-9]/.test(password)){
      lvl++;
    }
    // Check if there are letters in the password if(/[a-zA-Z]/.test(password)){
      lvl++;
    }
    // Check if there are any 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
  }


</script>
</body>
</html>

This is the end of this article about the implementation method of JavaScript regular password verification. For more relevant JavaScript regular password strength content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: