JS高級---案例：驗證密碼的強度

時間 2020-01-15

原文原文鏈接

案例：驗證密碼的強度

1. 給我密碼,我返回對應的級別css

2. 每次鍵盤擡起都要獲取文本框中的內容, 驗證文本框中有什麼東西, 獲得一個級別, 而後下面的div顯示對應的顏色html

<!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: 300px;
    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="pwd">密碼</label>
    <input type="text" id="pwd" maxlength="16">
    <!--課外話題-->
    <div>
      <em>密碼強度：</em>
      <em id="strength"></em>
      <div id="strengthLevel" class="strengthLv0"></div>
    </div>
  </div>
  <script src="common.js"></script>
  <script>

    //獲取文本框註冊鍵盤擡起事件
    my$("pwd").onkeyup = function () {
      //每次鍵盤擡起都要獲取文本框中的內容,驗證文本框中有什麼東西,獲得一個級別,而後下面的div顯示對應的顏色
      //若是密碼的長度是小於6的,沒有必要判斷
      my$("strengthLevel").className = "strengthLv" + (this.value.length >= 6 ? getLvl(this.value) : 0);
    };

    //給我密碼,我返回對應的級別
    function getLvl(pwd) {
      var lvl = 0;//默認是0級
      //密碼中是否有數字,或者是字母,或者是特殊符號
      if (/[0-9]/.test(pwd)) {
        lvl++;
      }
      //判斷密碼中有沒有字母
      if (/[a-zA-Z]/.test(pwd)) {
        lvl++;
      }
      //判斷密碼中有沒有特殊符號
      if (/[^0-9a-zA-Z_]/.test(pwd)) {
        lvl++;
      }
      return lvl;//最小的值是1,最大值是3
    }

  </script>


</body>

</html>