JavaScript设计表单并实现输入验证

首先，我们需要在 HTML 中设计表单，如下所示：

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br>

  <label for="confirm-password">确认密码:</label>
  <input type="password" id="confirm-password" name="confirm-password"><br>

  <input type="submit" value="提交">
</form>

现在，我们需要使用 JavaScript 来实现对输入的验证。我们可以在 `submit` 事件上添加监听器，然后使用 `preventDefault()` 方法来阻止表单提交，如果表单输入无效，我们将显示错误消息。

const form = document.querySelector('form');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');

form.addEventListener('submit', e => {
  e.preventDefault();

  if (nameInput.value === '') {
    showError(nameInput, '姓名不能为空');
  } else {
    showSuccess(nameInput);
  }

  if (emailInput.value === '') {
    showError(emailInput, '邮箱不能为空');
  } else if (!isValidEmail(emailInput.value)) {
    showError(emailInput, '邮箱格式不正确');
  } else {
    showSuccess(emailInput);
  }

  if (passwordInput.value === '') {
    showError(passwordInput, '密码不能为空');
  } else {
    showSuccess(passwordInput);
  }

  if (confirmPasswordInput.value === '') {
    showError(confirmPasswordInput, '确认密码不能为空');
  } else if (passwordInput.value !== confirmPasswordInput.value) {
    showError(confirmPasswordInput, '两次输入的密码不一致');
  } else {
    showSuccess(confirmPasswordInput);
  }
});

function showError(input, message) {
  const formControl = input.parentElement;
  formControl.className = 'form-control error';
  const errorMessage = formControl.querySelector('small');
  errorMessage.innerText = message;
}

function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

function isValidEmail(email) {
  const re = /\S+@\S+\.\S+/;
  return re.test(email);
}

在上面的代码中，我们定义了 `showError()` 和 `showSuccess()` 函数，用于在表单输入验证时显示错误或成功的消息。这些函数会根据表单输入的验证结果设置相应的 CSS 类名。

我们还定义了一个 `isValidEmail()` 函数用于验证电子邮件地址的格式。在表单提交时，我们将逐个验证每个输入字段，并根据需要调用 `showError()` 或 `showSuccess()` 函数。

最后，我们需要为表单的每个输入字段添加一个带有 `form-control` 类名的父元素。此外，我们还需要为这些父元素添加一个用于显示错误消息的 `small` 元素，如下所示：

<div class="form-control">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">
  <small></small>
</div>