JS高級---案例：驗證密碼的強度-有解無憂

案例：驗證密碼的強度

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

2. 每次鍵盤抬起都要獲取文本框中的內容, 驗證文本框中有什么東西, 得到一個級別, 然后下面的div顯示對應的顏色

<!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" ></div>
    </div>
  </div>
  <script src="https://www.cnblogs.com/jane-panyiyun/p/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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/156208.html

標籤：JavaScript

上一篇：JS高級---識別正則運算式是否匹配

下一篇：JS高級---案例：驗證用戶輸入的是不是郵箱