如何在确认邮箱与输入邮箱不匹配时阻止表单提交？

算力阿峰

2026-7-24

问题修复方案

问题根源

onsubmit调用validateForm时未传递event参数，导致event.preventDefault()无法执行（event为undefined）
提交按钮上的onclick={alertUser()}存在语法错误且alertUser函数未定义，会干扰表单提交流程
全局变量email和confirmationEmail可能在DOM未完全加载时就执行获取，导致无法拿到实际表单元素

修复后的完整代码

表单标签

<form id="theForm" onsubmit="return validateForm(event)" action="https://webto.salesforce.com/bla bla bla" method="POST">
  <!-- 确保邮箱输入框id为email，确认邮箱输入框id为confirmationEmail -->
  <input type="email" id="email" name="email" placeholder="输入邮箱">
  <input type="email" id="confirmationEmail" name="confirmationEmail" placeholder="确认邮箱">
  <!-- 其他表单字段 -->

提交按钮

<input type="submit" name="submit" class="submit-button">

JavaScript代码

function validateForm(event) {
  // 每次验证时获取元素，避免DOM加载顺序问题
  const email = document.getElementById('email');
  const confirmationEmail = document.getElementById('confirmationEmail');

  // 先检查元素是否存在，避免报错
  if (!email || !confirmationEmail) {
    alert('表单元素加载异常');
    event.preventDefault();
    return false;
  }

  // 忽略前后空格，提升验证体验
  if (email.value.trim() !== confirmationEmail.value.trim()) {
    alert('邮箱不匹配，请重新输入！');
    event.preventDefault();
    return false;
  }
  return true;
}