submit() 是表单处理流程里比较关键的一个事件方法。它专门绑定在 <form> 元素上，在用户提交表单的那一刻触发。提交的方式有两种：点击提交按钮，或者在表单输入框获得焦点时按回车键。无论哪种方式，submit 事件都会在数据真正发送之前被触发。
这个时机是前端做表单提交前拦截处理的绝佳位置。可以在 submit 回调里做之后的校验、格式化数据、阻止不合规的提交等。submit() 配合 event.preventDefault() 可以实现“满足条件才放行，不满足就拦截”的逻辑。
语法形式
触发 submit 事件：
$(selector).submit()
程序化地触发表单提交事件。绑定的处理函数会执行，但如果处理函数中有 event.preventDefault()，程序化触发也会被阻止。
绑定 submit 事件：
$(selector).submit(function(event){
// 表单提交时执行的代码
})
给表单绑定提交事件的处理函数。回调中的 event 参数可以用来调用 event.preventDefault() 阻止表单的默认提交行为。
基础示例：验证特定内容才能提交
下面这个例子演示了 submit() 的拦截用法。用户在输入框中必须输入指定的关键词，点击提交按钮（或按回车）时才会放行，否则显示错误提示并阻止提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>submit() 提交验证示例</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.hint-text {
color: #2471a3;
margin-bottom: 6px;
}
.msg {
margin-left: 10px;
color: #c0392b;
font-weight: bold;
}
</style>
</head>
<body>
<p class="hint-text">输入 <b>编程学习</b> 才能成功提交表单：</p>
<form action="javascript:alert('提交成功！')">
<div>
<input type="text" id="codeInput" placeholder="请输入关键词">
<input type="submit" value="提交">
</div>
</form>
<span class="msg" id="feedbackMsg"></span>
<script>
$("form").submit(function(event){
var inputValue = $("input:first").val();
if(inputValue === "编程学习"){
$("#feedbackMsg").text("提交成功！").show();
return; // 验证通过，允许提交
}
$("#feedbackMsg").text("输入内容不正确，请重试！").show().fadeOut(2000);
event.preventDefault(); // 阻止表单提交
});
</script>
</body>
</html>
在输入框中随便输入一些文字然后点提交，会看到错误提示闪现 2 秒后消失，表单并不会被提交。当输入正确的关键词“编程学习”并提交时，return 放行，表单正常执行 action 里的 JavaScript 弹窗。
这里 event.preventDefault() 的作用是阻止表单的默认提交流程。如果缺少这行代码，即使显示了错误提示，表单仍然会被提交到服务器。很多初学者在写表单校验时忘了加这一行，结果提示倒是显示了，但数据还是提交出去了。
为什么用 submit 事件而不是按钮的 click 事件
有些开发者会在提交按钮上绑 click 事件来做校验，这样做有两个问题：
-
按回车提交时
click事件并不会被触发，校验就被绕过去了。 -
如果有多个按钮（比如“保存草稿”和“正式提交”），需要分别绑定，逻辑分散。
直接在 form 上绑 submit 更稳妥：不管是点按钮提交还是按回车提交，不管页面上有几个提交按钮，submit 事件都会被统一触发。这是表单校验的推荐做法。
submit 事件的实际应用场景
submit() 在日常开发中的使用频率相当高，常见场景包括：
-
前端表单校验： 在提交前检查必填项是否填写、格式是否正确，不通过就阻止提交并提示用户。
-
提交前数据处理： 自动格式化输入内容（如去掉首尾空格）、补充隐藏字段、设置时间戳等。
-
防止重复提交： 用户点击提交后立即禁用提交按钮，防止网络延迟时重复点击导致多次提交。
-
异步提交： 阻止默认行为后用
$.ajax()把表单数据异步发送到服务器，实现无刷新提交。
关于防止重复提交，有一个很实用的处理技巧：
$("form").submit(function(event){
var $submitBtn = $(this).find("input[type=submit]");
if($submitBtn.prop("disabled")){
event.preventDefault();
return;
}
$submitBtn.prop("disabled", true).val("提交中...");
});
提交后立即禁用按钮并修改按钮文字，既能防止用户重复点击，也给出了视觉反馈。请求完成后再把按钮状态恢复。
本节课程知识要点
-
submit()事件绑定在<form>元素上，在表单提交的瞬间触发，不管是通过点击提交按钮还是按回车键。 -
通过
event.preventDefault()可以阻止表单的默认提交行为，实现前端拦截和校验。 -
做表单校验时优先在
form上绑submit，而非在提交按钮上绑click，能覆盖更多提交触发方式。 -
配合
$.ajax()可实现无刷新异步提交，配合按钮状态管理可防止重复提交。 -
程序化调用
.submit()同样会触发绑定的事件处理函数，可用于自动提交场景。
submit() 是表单提交流程的控制关键。它给开发者提供了在数据真正发送之前进行拦截和处理的机制，结合 event.preventDefault() 可以实现完备的前端校验逻辑。表单相关的事件方法讲到这里——focus、blur、change、select、submit——已经覆盖了从用户输入、焦点切换、内容选中到最终提交的完整交互链路。掌握这些事件方法，前端表单开发的基本功就比较扎实了。
