如何使用 JavaScript 验证确认密码？

在网站或应用程序中，有时需要让用户输入密码和确认密码两次以确保输入正确。因此，我们需要使用 JavaScript 验证确认密码是否与输入的密码匹配。在这篇文章中，我们将通过以下步骤来实现：

1. 获取密码和确认密码输入框的元素
2. 添加事件监听器以侦听密码和确认密码的更改
3. 如果密码和确认密码相同，则添加“valid”类
4. 如果密码和确认密码不同，则添加“invalid”类

获取密码和确认密码输入框的元素

首先，我们需要获取密码和确认密码的输入框元素。我们可以使用 document.getElementById 方法获取它们：

const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');

添加事件监听器以侦听更改

下一步是添加事件监听器以侦听密码和确认密码的更改。我们可以使用 addEventListener 方法添加 input 事件监听器，并在每次更改时调用相应的验证函数。

passwordInput.addEventListener('input', validate);
confirmPasswordInput.addEventListener('input', validate);

验证密码和确认密码

在验证函数中，我们需要获取密码和确认密码的值，并比较它们是否相同。如果它们相同，则为输入框添加“valid”类，否则添加“invalid”类。

function validate() {
  const password = passwordInput.value;
  const confirmPassword = confirmPasswordInput.value;

  if (password === confirmPassword) {
    confirmPasswordInput.classList.remove('invalid');
    confirmPasswordInput.classList.add('valid');
  } else {
    confirmPasswordInput.classList.remove('valid');
    confirmPasswordInput.classList.add('invalid');
  }
}

完整代码

const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');

passwordInput.addEventListener('input', validate);
confirmPasswordInput.addEventListener('input', validate);

function validate() {
  const password = passwordInput.value;
  const confirmPassword = confirmPasswordInput.value;

  if (password === confirmPassword) {
    confirmPasswordInput.classList.remove('invalid');
    confirmPasswordInput.classList.add('valid');
  } else {
    confirmPasswordInput.classList.remove('valid');
    confirmPasswordInput.classList.add('invalid');
  }
}

以上就是使用 JavaScript 验证确认密码的步骤和代码。您可以根据自己的需求对其进行更改和调整。