如何在表单验证中添加CSS类

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" class="required">
  <br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" class="required email">
  <br>
  <input type="submit" value="提交">
</form>

document.getElementById("myForm").addEventListener("submit", function(event) {
  var nameInput = document.getElementById("name");
  var emailInput = document.getElementById("email");
  
  if (nameInput.value.trim() === "") {
    nameInput.classList.add("error");
  } else {
    nameInput.classList.remove("error");
  }
  
  if (emailInput.value.trim() === "" || !isValidEmail(emailInput.value)) {
    emailInput.classList.add("error");
  } else {
    emailInput.classList.remove("error");
  }
  
  if (!nameInput.classList.contains("error") && !emailInput.classList.contains("error")) {
    // 表单验证通过，可以继续提交
    return true;
  } else {
    // 阻止表单提交
    event.preventDefault();
    return false;
  }
});

function isValidEmail(email) {
  // 使用正则表达式验证邮箱格式
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}