使用if else验证表单时，能否使用submit handler及如何放置？

能否使用Submit Handler？ #

完全可以。不管你是用规则验证库还是普通if/else做表单校验，都能正常使用表单的submit事件处理器（submit handler），两者并不冲突。

Submit Handler的放置位置 #

你需要将submit handler绑定到表单元素本身，而非提交按钮上。具体实现逻辑如下：

• 通过DOM选择器获取目标表单元素（比如document.getElementById）
• 给表单添加submit事件监听，在监听函数内完成校验、确认弹窗等自定义逻辑
• 关键操作：必须先调用event.preventDefault()阻止表单的默认提交行为，直到你完成所有自定义逻辑后，再决定是否提交表单

示例代码 #

// 获取表单DOM元素
const targetForm = document.getElementById('user-form');

// 绑定submit事件处理器
targetForm.addEventListener('submit', function(e) {
  // 先阻止默认提交，避免页面直接跳转
  e.preventDefault();

  // 执行你的if/else校验逻辑
  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;
  let isFormValid = true;

  if (!username.trim()) {
    alert('用户名不能为空');
    isFormValid = false;
  } else if (!email.includes('@')) {
    alert('请输入正确格式的邮箱');
    isFormValid = false;
  }

  // 校验通过后弹出确认弹窗
  if (isFormValid) {
    if (confirm('确认要提交这份表单吗？')) {
      // 用户确认后，手动触发表单提交
      targetForm.submit();
    }
  }
});

这段代码里，我们先拦截表单的默认提交，做完if/else校验后，再通过确认弹窗让用户确认，用户同意后才手动提交表单。

内容的提问来源于stack exchange，提问作者Amarthya reddy