使用Javascript的多级表单验证

// 表单验证函数
function validateForm() {
  // 获取表单字段的值
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;

  // 验证规则
  var nameRegex = /^[a-zA-Z\s]+$/;
  var emailRegex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
  var passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;

  // 错误提示信息
  var errors = [];

  // 验证姓名字段
  if (!nameRegex.test(name)) {
    errors.push("姓名只能包含字母和空格");
  }

  // 验证邮箱字段
  if (!emailRegex.test(email)) {
    errors.push("邮箱格式不正确");
  }

  // 验证密码字段
  if (!passwordRegex.test(password)) {
    errors.push("密码必须包含至少一个数字、一个小写字母、一个大写字母，且长度至少为8位");
  }

  // 如果有错误信息，则阻止表单提交并显示错误提示
  if (errors.length > 0) {
    event.preventDefault();
    var errorContainer = document.getElementById("error-container");
    errorContainer.innerHTML = errors.join("<br>");
  }
}

// 表单提交事件绑定
var form = document.getElementById("my-form");
form.addEventListener("submit", validateForm);