匹配密码并在 JavaScript 中确认密码，如果为真，则提交表单

在 JavaScript 中，我们经常需要验证用户输入的密码是否符合要求，并且需要确认密码是否一致。本文将介绍如何通过正则表达式和 JavaScript 实现密码匹配和确认，并在密码确认为真时提交表单。

步骤

1. HTML 表单

我们先来看一下 HTML 表单的代码：

<form id="signup-form">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <label for="confirm-password">Confirm Password:</label>
  <input type="password" id="confirm-password" name="confirm-password" required>
  <br>
  <button type="submit">Sign up</button>
</form>

这是一个简单的注册表单，有两个密码输入框和一个提交按钮。这里我们将两个密码输入框都设置了 required 属性，表示必须输入才能提交表单。

2. JavaScript 代码

接下来编写 JavaScript 代码。我们需要在提交表单时验证两个密码是否一致。代码如下：

const form = document.getElementById('signup-form');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirm-password');

form.addEventListener('submit', (event) => {
  if (password.value !== confirmPassword.value) {
    event.preventDefault();
    alert('Passwords do not match');
  }
});

这段代码首先获取了表单、密码和确认密码的元素。然后添加了一个表单提交事件监听器，当用户点击提交按钮时，执行回调函数。

在回调函数中，我们通过比较密码和确认密码的值来判断两个密码是否一致。如果不一致，使用 event.preventDefault() 阻止表单提交，并弹出提示框告诉用户密码不一致。

3. 正则表达式

除了确认两个密码是否一致之外，我们还需要判断密码是否符合要求。这里我们使用正则表达式来进行匹配。

const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;

这是一个符合通用密码强度规则的正则表达式，其中包括一位数字、一位小写字母、一位大写字母和至少 8 个字符。在代码中，我们可以使用 test() 方法来测试密码是否符合要求。

if (!passwordRegex.test(password.value)) {
  event.preventDefault();
  alert('Password must contain at least one digit, one lowercase letter, one uppercase letter, and at least 8 characters');
}

如果密码不符合要求，使用 event.preventDefault() 阻止表单提交，并弹出提示框告诉用户密码不符合要求。

完整代码

最终的代码如下：

<form id="signup-form">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <label for="confirm-password">Confirm Password:</label>
  <input type="password" id="confirm-password" name="confirm-password" required>
  <br>
  <button type="submit">Sign up</button>
</form>

<script>
const form = document.getElementById('signup-form');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirm-password');

const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;

form.addEventListener('submit', (event) => {
  if (!passwordRegex.test(password.value)) {
    event.preventDefault();
    alert('Password must contain at least one digit, one lowercase letter, one uppercase letter, and at least 8 characters');
  } else if (password.value !== confirmPassword.value) {
    event.preventDefault();
    alert('Passwords do not match');
  }
});
</script>

结论

在 JavaScript 中，我们可以使用正则表达式来匹配密码并使用事件监听器在密码确认为真时提交表单。这可以为用户提供更好的用户体验，加强表单的安全性和可靠性。