在Web开发中，使用JavaScript做表单验证是非常常见的需求。但不少人在用事件监听器绑定提交事件时，发现即使校验没通过，表单还是照常提交到后端。这背后的核心原因之一，就是对return语句以及事件监听机制的理解不够准确。
一、表单提交的默认行为
当用户点击提交按钮或按下回车，浏览器会触发form的submit事件，并执行默认的表单提交动作，将页面跳转到action指定的地址。如果我们想阻止这种行为，就必须显式告诉浏览器取消默认动作。
二、return语句在行内绑定中的作用
在早期开发中，我们常看到如下写法：
<form onsubmit="return checkForm()" action="https://ipipp.com/submit">
<input type="text" id="username" />
<button type="submit">提交</button>
</form>
<script>
function checkForm() {
var val = document.getElementById('username').value;
if (!val) {
alert('用户名不能为空');
return false;
}
return true;
}
</script>
这里的onsubmit="return checkForm()"非常关键。只有写了return，函数返回的false才会被表单的onsubmit属性接收，从而阻止提交。如果只写onsubmit="checkForm()"，函数返回值被丢弃，验证失败也拦不住提交。
三、addEventListener中的return为何无效
现代代码更多使用addEventListener绑定事件：
document.querySelector('form').addEventListener('submit', function(e) {
var val = document.getElementById('username').value;
if (!val) {
alert('用户名不能为空');
return false; // 这里的return不会影响表单提交
}
});
在addEventListener的回调里，return语句仅仅是结束当前函数，并不会像行内onsubmit那样被表单用来判断是否取消提交。因此验证失效，表单依然提交。
四、正确的阻止提交方式
在监听器内部，应当调用事件对象的preventDefault方法：
document.querySelector('form').addEventListener('submit', function(e) {
var val = document.getElementById('username').value;
if (!val) {
alert('用户名不能为空');
e.preventDefault(); // 明确阻止默认提交行为
return; // 仅用于结束函数
}
// 校验通过，什么都不做，表单正常提交
});
| 绑定方式 | 阻止提交手段 | return作用 |
|---|---|---|
| 行内onsubmit | return false | 通知表单取消默认行为 |
| addEventListener | e.preventDefault() | 仅退出函数，无阻止效果 |
五、常见误区总结
- 认为在监听器里return false就能拦住提交，这是混淆了行内绑定和addEventListener。
- 校验函数写在外部，监听器没有调用preventDefault，导致逻辑执行了但提交没停。
- 用input()这类函数做校验时，注意它只是普通函数调用，不是标签，不要和<input>混淆。
结论：表单验证失效通常不是逻辑写错，而是没有用对阻止默认行为的方式。行内用return，监听器用preventDefault，才能确保验证真正生效。
JavaScript事件监听器表单验证return语句preventDefault修改时间：2026-07-24 23:36:22