使用 JavaScript 创建一个简单的密码强度指示器

太过爱你忘了你带给我的痛 2023-10-10 22:24 14阅读 0赞

您可能在网络上看到过很多密码强度指示器的例子。他们让用户知道他们使用的密码很弱，并指出修改后强度如何变化。在本教程中，我们将构建如下所示的密码强度指示器：

![在这里插入图片描述][79b49979b0914da3b02c6246330d0c65.gif]  
让我们从创建密码输入字段和密码强度的 HTML 开始，

稍后我们可以设置样式以直观地表示密码强度：

<div id="password">
      <label for="password-input">Password</label>
      <input
        id="password-input"
        name="password-input"
        type="password"          
        required
      />
      <div id="password-strength"><span></span></div> 
    </div>

为了确定密码强度，我们将使用我通过 CDN 包含的zxcvbn JavaScript 库。它也可以作为独立下载和 NPM 包使用：

现在对于 JavaScript，首先让我们为密码输入和密码强度定义变量：

const pwd = document.getElementById("password-input");
    const pwdStrength = document.getElementById("password-strength");

然后，每次在密码输入字段中添加或删除字符时，我们将使用事件侦听器来检查密码强度：

pwd.addEventListener("input", function () {
        
      const pwdVal = pwd.value;
      let result = zxcvbn(pwdVal);  
      pwdStrength.className += "strength-" + result.score;  
    });

从返回的分数zxcvbn()在 0 到 4 之间。然后我们将这个分数作为密码强度的一个类添加

，这样我们就可以根据返回的分数应用不同的 CSS 样式。

这就完成了 JavaScript，现在是从密码标签和输入字段开始的 CSS：

#password {
        
      width: 250px;
    }
    #password label {
        
      display: block;
    }
    #password-input {
        
      width: 230px;
      padding: 10px;
      margin: 10px 0 5px 0;
    }

现在对于强度指示器，它将显示为浅灰色条带，直到用户开始输入密码：

#password-strength {
        
      height: 5px;
      width: 100%;
      display: block;
      background-color: #ccc;
    }
    #password-strength span {
        
      display: block;
      height: 5px;
      border-radius: 2px;
      transition: all 500ms ease;
    }

剩下要做的就是根据强度得分设置颜色和宽度：

.strength-0 span {
        
      background-color: red;
      width: 5%;
    }
    .strength-1 span {
        
      background-color: orangered;
      width: 25%;
    }
    .strength-2 span {
        
      background-color: orange;
      width: 50%;
    }
    .strength-3 span {
        
      background-color: yellowgreen;
      width: 75%;
    }
    .strength-4 span {
        
      background-color: green;
      width: 100%;
    }

4K炫酷蓝色科技倒计时

[79b49979b0914da3b02c6246330d0c65.gif]: https://img-blog.csdnimg.cn/79b49979b0914da3b02c6246330d0c65.gif