📌  相关文章
📜  如何在 html 中检查密码并重新输入密码 - Javascript (1)

📅  最后修改于: 2023-12-03 15:24:11.385000             🧑  作者: Mango

如何在 HTML 中检查密码并重新输入密码 - JavaScript

在网站上，我们经常要求用户输入密码来保护他们的账户或数据。为了确保输入的密码安全，并且用户在输入密码时没有做错，我们需要在前端对密码进行验证。本文将介绍如何使用 JavaScript 在 HTML 中检查密码并重新输入密码。

HTML 元素

我们需要使用四个 HTML 元素来创建密码输入和确认输入的界面：label、input、button 和 div。如下所示：

<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword">
<button id="submitBtn" type="button">Submit</button>
<div id="message"></div>

这里我们使用了 label 元素来为输入框提供文本标签，并用 input 元素创建了两个密码输入框（类型为 password）。我们还使用了 button 元素作为提交按钮，并创建了一个 div 元素来向用户显示密码是否匹配的信息。

JavaScript 验证

为了在 JavaScript 中验证密码，我们需要使用 querySelector 来获取 HTML 元素的引用，使用 addEventListener 来设置按钮的点击事件处理程序。之后，我们将访问密码输入框并将值与确认密码输入框的值进行比较。如果它们匹配，则将消息设置为“密码匹配”，否则将消息设置为“密码不匹配”。

const passwordInput = document.querySelector('#password');
const confirmPasswordInput = document.querySelector('#confirmPassword');
const submitBtn = document.querySelector('#submitBtn');
const messageDiv = document.querySelector('#message');

submitBtn.addEventListener('click', function() {
  const password = passwordInput.value;
  const confirmPassword = confirmPasswordInput.value;
  if (password === confirmPassword) {
    messageDiv.textContent = 'Password matched';
  } else {
    messageDiv.textContent = 'Password not matched';
  }
});

在点击提交按钮时，将会执行这段代码。首先获取了密码输入框和确认密码输入框的引用，然后检查两个输入框的值是否匹配。如果匹配，将消息设置为“密码匹配”，否则将消息设置为“密码不匹配”。

完整代码

这里是完整代码的 HTML 和 JavaScript 部分：

<!DOCTYPE html>
<html>
  <head>
    <title>Password validation</title>
  </head>
  <body>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword">
    <button id="submitBtn" type="button">Submit</button>
    <div id="message"></div>

    <script>
      const passwordInput = document.querySelector('#password');
      const confirmPasswordInput = document.querySelector('#confirmPassword');
      const submitBtn = document.querySelector('#submitBtn');
      const messageDiv = document.querySelector('#message');

      submitBtn.addEventListener('click', function() {
        const password = passwordInput.value;
        const confirmPassword = confirmPasswordInput.value;
        if (password === confirmPassword) {
          messageDiv.textContent = 'Password matched';
        } else {
          messageDiv.textContent = 'Password not matched';
        }
      });
    </script>
  </body>
</html>
结论

现在，我们已经学会了如何在 HTML 页面中检查密码并重新输入密码。我们使用了 input 元素和 JavaScript，同时结合了 querySelector 和 addEventListener 来实现功能。此外，我们还学习了如何使用文本标签和按钮，以及如何向用户显示验证信息。