如何使用JavaScript添加表单验证？

// 获取表单元素
var form = document.getElementById('myForm');

// 监听表单提交事件
form.addEventListener('submit', function(event) {
  // 验证表单输入
  if (!validateForm()) {
    event.preventDefault(); // 阻止表单提交
  }
});

// 验证函数
function validateForm() {
  var nameInput = document.getElementById('name');
  var emailInput = document.getElementById('email');
  
  // 检查姓名是否为空
  if (nameInput.value.trim() === '') {
    nameInput.classList.add('error'); // 添加错误样式
    nameInput.nextElementSibling.innerText = '请输入姓名'; // 添加错误提示
    return false;
  }
  
  // 检查邮箱格式是否正确
  var emailRegex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
  if (!emailRegex.test(emailInput.value)) {
    emailInput.classList.add('error');
    emailInput.nextElementSibling.innerText = '请输入有效的邮箱地址';
    return false;
  }
  
  // 验证通过
  return true;
}