以下是我如何使用 Javascript 制作一个强大的密码检查器。
第一步——编写基本结构。
步骤 2 - 创建密码输入框。
步骤 3 - 创建验证清单。
步骤 4 - 显示/隐藏密码。
步骤 5 - 添加验证
本文将介绍我如何制作一个简单的密码强度检测器，用于检查密码强度。您可能在大多数现代网站上都见过这种类型的检测器或验证工具。那么，让我们来看看我是如何制作的。
在上面的预览中，您可以清楚地看到我们将要制作的内容。页面上有一个密码输入框，您可以直接在那里输入密码。当您将焦点放在该输入框时，会弹出一个验证清单，列出密码应包含的内容。一旦您开始输入，清单就会检查是否满足所有条件。此外，右侧还有一个眼睛图标，点击即可查看密码。下方是一个视频教程，我将在其中逐步演示如何制作这个项目。
视频教程
如果你看到了，不妨也订阅一下这个频道。好了，回到正题，我们来看看这篇博客是怎么写的。
一切运行情况如何？
如果你只想快速了解一下它的工作原理，那就看看这里。我使用 CSS:focus选择器来显示/隐藏复选框，底层则使用regexJavaScript 来验证密码，每次都会触发一个keyup使用正则表达式的事件test()。至于眼睛图标，它的作用是在事件发生时切换password输入框的状态。typetextpasswordtextclick
那我们开始写代码吧。
第一步——编写基本结构。
那么，我们先从基本的 HTML 结构开始。创建一个index.html文件和style.css一个app.js文件。然后添加基本的 HTML 结构boiler code，并链接 CSS 和 JS 文件。类似这样👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strong Password Validation</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
</body>
</html>
在上面的代码中，我Google Fonts - Poppins也有FontAwesomeCDN。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #d34970;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
基本框架搭建完成后，我们就可以进行下一步了。
步骤 2 - 创建密码输入框。
要创建密码输入框，首先让我们创建一个div内部元素<body>来包裹元素input以及type=password图标eye，并给它们添加类名，以便我们可以在 CSS 文件中设置它们的样式。
<body>
<div class="password-input-box">
<input type="password" placeholder="Password" class="password-input">
<i class="fa-solid fa-eye show-password"></i>
</div>
</body>
.password-input-box{
position: relative;
width: 300px;
height: 40px;
}
.password-input{
width: 100%;
height: 100%;
background: #fff;
border: none;
padding: 5px 15px;
outline: none;
border-radius: 5px;
color: #d34970;
padding-right: 45px;
}
.password-input::placeholder{
color: #d34970;
}
.password-input:focus{
box-shadow: 0 0 0 3px #d34970,
0 0 0 6px #4fe222;
}
.show-password{
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #92203f;
}
输出
步骤 3 - 创建验证清单。
既然我们现在有了密码输入框，就还需要一个验证清单框，以便在前端向用户显示密码需要符合哪些条件。因此，在类div名为 `with` 的元素内password-input-box创建一个新div的清单框，并在其中ul创建一个无序列表来创建检查点。类似这样👇
<div class="password-checklist">
<h3 class="checklist-title">Password should be</h3>
<ul class="checklist">
<li class="list-item">At least 8 character long</li>
<li class="list-item">At least 1 number</li>
<li class="list-item">At least 1 lowercase letter</li>
<li class="list-item">At least 1 uppercase letter</li>
<li class="list-item">At least 1 special character</li>
</ul>
</div>
.password-checklist{
position: absolute;
top: calc(100% + 10px);
width: 100%;
padding: 20px 30px;
background: #ef547f;
border-radius: 5px;
}
.checklist-title{
font-size: 15px;
color: #922037;
margin-bottom: 10px;
}
.checklist{
list-style: none;
}
.list-item{
padding-left: 30px;
color: #fff;
font-size: 14px;
}
.list-item::before{
content: '\f00d';
font-family: FontAwesome;
display: inline-block;
margin: 8px 0;
margin-left: -30px;
width: 20px;
font-size: 12px;
}
.list-item.checked{
opacity: 0.5;
}
.list-item.checked::before{
content: '\f00c';
color: #922037;
}
输出
所以，让我们用 Javascript 来实现所有功能吧。
步骤 4 - 显示/隐藏密码。
在 JavaScript 中，我们可以做的第一件事是将密码输入框type从` password<input> ` 切换text回 `<input> password`。为此，我们首先需要在 JavaScript 中选择 `<input>`icon和 `<input>` input。之后，我们可以使用`<input>` 方法添加click事件，并在回调函数中使用 `if` 和 `else` 语句来检查当前的密码类型以及需要更改的类型。iconaddEventListener
你可以从下面的代码中详细了解这一点。
// show password toggler
let showPasswordBtn = document.querySelector('.show-password');
let passwordInp = document.querySelector('.password-input');
showPasswordBtn.addEventListener('click', () => {
// toggle icon
// font awesome class for eye icon
showPasswordBtn.classList.toggle('fa-eye');
// font awesome class for slashed eye icon
showPasswordBtn.classList.toggle('fa-eye-slash');
// ternary operator a shorthand for if and else to change the type of password input
passwordInp.type = passwordInp.type === 'password' ? 'text' : 'password';
})
步骤 5 - 添加验证
现在我们已经完成了这个项目的主要功能。接下来让我们看看我是如何实现的。
所以首先我们需要隐藏复选框，只在密码输入框获得焦点时才显示它，我们可以这样做。
.password-checklist{
...
opacity: 0;
pointer-events: none;
transform: translateY(20px);
transition: .5s ease;
}
.password-input:focus ~ .password-checklist{
opacity: 1;
transform: translateY(0);
}
所以，只有当密码输入框处于焦点状态时，这个框才会显示。现在编写 JavaScript 代码。
// string password validation
let passwordChecklist = document.querySelectorAll('.list-item');
let validationRegex = [
{ regex: /.{8,}/ }, // min 8 letters,
{ regex: /[0-9]/ }, // numbers from 0 - 9
{ regex: /[a-z]/ }, // letters from a - z (lowercase)
{ regex: /[A-Z]/}, // letters from A-Z (uppercase),
{ regex: /[^A-Za-z0-9]/} // special characters
]
passwordInp.addEventListener('keyup', () => {
validationRegex.forEach((item, i) => {
let isValid = item.regex.test(passwordInp.value);
if(isValid) {
passwordChecklist[i].classList.add('checked');
} else{
passwordChecklist[i].classList.remove('checked');
}
})
})
如果你阅读上面的 JS 代码，你会看到validationRegex一个变量，这个变量是一个数组，regex其中包含了我们想要验证密码的每个条件的表达式。数组内部包含键为 `key` 的对象regex，该键对应的值就是 `key` expression。创建这个数组时，你需要记住一点：确保表达式的索引号与<li>HTML 中的条件一致。也就是说，如果 HTML 文件中有一个<li>长度为 8 个字符的字符串，那么数组中的第一个元素应该是regex对应 8 个字符的表达式，否则你会在 UI 界面上看到错误提示，表明验证了错误的条件。
总之，回到 JavaScript 部分，一旦我们有了正则表达式数组，我就会在keyup事件发生时遍历它passwordInp。在遍历过程中，我们会选择每个正则表达式，并使用相应test()的方法来验证其password值，然后将布尔值存储在一个isValid变量中。
最后，我使用 If 和 else 语句来添加或删除标签的checked类<li>。
完成所有步骤后，您最终将拥有一个功能齐全的密码验证器。希望您喜欢这篇文章，并觉得它对您有所帮助。感谢阅读本文。如果您有任何建议、疑问或想分享任何内容，请随时在评论区留言。如果您有兴趣学习如何制作功能齐全的网站，可以访问我的YouTube频道。
文章来源：https://dev.to/themodernweb/here-is-how-i-made-a-strong-password-checker-using-javascript-3m9o