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

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

交互

大家好，我正在做一个用户注册表单，想用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()">。调试时发现函数根本没执行，但控制台也没报错，这是哪里出问题了？

表单交互表单验证

我来解答赞 17 收藏

反馈

1 条解答

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