如何使用JavaScript阻止WordPress注册表单提交（邮箱验证场景）

• 事件绑定错误：绑定提交按钮的click事件无法拦截表单本身的submit默认行为，表单提交逻辑会优先执行跳转
• 阻止逻辑错误：window.stop()的作用是终止当前页面资源加载，无法拦截已经触发的表单提交动作
• 潜在判断异常：没有判断mailrefine-msg元素是否存在，也没有处理提示文本前后可能存在的空格、换行等字符，容易出现判断失效

把你原来的JS代码替换为下面的内容即可：

<script>
// 等待DOM完全加载后再绑定事件，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 绑定表单的submit事件，而非按钮的click事件
  const registerForm = document.getElementById('mailrefine-form');
  registerForm.addEventListener('submit', function(e) {
    const mailMsg = document.getElementById('mailrefine-msg');
    // 先判断提示元素存在，再校验内容（自动去除首尾空白字符）
    if (mailMsg && mailMsg.innerHTML.trim() === 'Email is invalid') {
      // 阻止表单默认提交行为
      e.preventDefault();
      // 可选扩展：高亮邮箱输入框提示用户
      document.getElementById('mailrefine-email').style.border = '1px solid #ff3333';
    }
  });
});
</script>

• 如果你调用mailrefine.io API的逻辑是异步请求（点击提交后才发请求拿验证结果），上述同步判断逻辑会在API返回前执行，仍然会失效。这种情况需要把表单提交逻辑放在API请求的回调函数里，拿到验证结果后再决定是否调用registerForm.submit()手动提交表单
• 前端JS校验可以被用户绕过，建议后端收到注册请求后再调用一次mailrefine.io API做二次校验，避免无效邮箱注册成功

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