表单验证函数在提交时没有触发怎么办？

南宫沐言提问于 2026-02-11 00:17:25 阅读 58

交互

大家好，我正在做一个用户注册表单，想用JS验证邮箱格式。按照教程写好了验证函数，但点击提交按钮时验证完全没反应，直接跳转页面了。

我尝试过在表单加了onsubmit调用验证函数，但好像没生效。代码是这样的：


function validateForm() {
  const email = document.querySelector('#email').value;
  const regex = /^[^s@]+@[^s@]+.[^s@]+$/;
  if (!regex.test(email)) {
    alert('邮箱格式错误');
    return false;
  }
}

HTML里表单写的是<form onsubmit="validateForm()">。调试时发现函数根本没执行，但控制台也没报错，这是哪里出问题了？

表单交互表单验证

我来解答赞 25 收藏

反馈

2 条解答

西门耘郗 Lv1

你这问题我太熟了，当年我也栽过跟头。核心问题在于你没阻止表单默认提交行为，所以即使验证函数执行了，它返回的 false 也没用——因为表单早就跳转了。

先说两个坑点：

第一个是正则里用了 s 而不是 s，这会导致空格字符被当成合法邮箱的一部分，得改成 /^[^s@]+@[^s@]+.[^s@]+$/

第二个更关键：onsubmit="validateForm()" 这种写法在 HTML 里是没加 return 的，应该写成 onsubmit="return validateForm()"，不然函数返回值根本传不到表单提交流程里。

不过更推荐用 JS 绑定事件，别在 HTML 里写 onsubmit，更干净点。比如：

document.addEventListener('DOMContentLoaded', function() {

  const form = document.querySelector('#yourFormId');

  form.addEventListener('submit', function(e) {

    const email = document.querySelector('#email').value;

    const regex = /^[^s@]+@[^s@]+.[^s@]+$/;

    if (!regex.test(email)) {

      e.preventDefault();

      alert('邮箱格式错误');

      return false;

    }

  });

});

另外提醒一句，JS 验证只能做前端友好提示，真正安全还得靠后端验证，别把用户邮箱直接裸提交。

如果还是不触发，检查下表单是不是被 ajax 提交了，或者有没有别的 JS 把事件覆盖了——有时候插件冲突也会导致事件失效，这种情况用 event.stopPropagation() 前先看看控制台有没有别的错误。

2026-02-24 14:20

FSD-慧娜 Lv1

你这个情况我碰到过八百回了，onsubmit没阻断默认行为呗。你现在写的 onsubmit="validateForm()" 只是调用了函数，但没把返回值传给表单，所以就算return false也拦不住提交。

最简单的改法是把onsubmit改成这样：

<form onsubmit="return validateForm()">

注意前面加了个 return，这样才能把false传回去阻止提交。

另外你那个正则也有点问题，[^s@]+.[^s@]+ 这里应该用 \. 转义点号，不然.会匹配任意字符。建议改成：

const regex = /^[^s@]+@[^s@]+.[^s@]+$/;

还有个更现代的写法是别用内联事件，用 addEventListener，不过你现在这样修一下就能跑通了。下次搞复杂验证我再教你用钩子函数统一处理。

2026-02-11 01:00