submit事件只能绑定在form元素上，input等子元素绑定无效；必须在form的submit事件中修改input值以确保序列化前生效，且需注意异步校验需preventdefault后手动提交。
为什么不能给 input 绑定 submit 事件
因为 HTML 规范明确限定：submit 事件只在 form 元素上触发，且不会冒泡到子元素（包括 input、textarea 等）。你写 input.addEventListener('submit', ...) 浏览器会静默忽略，不报错也不执行。
常见错误现象：
- 表单提交后，服务端收到的仍是原始输入值，预处理逻辑完全没生效
- 控制台无报错，开发者误以为逻辑已运行，反复检查 JS 路径或拼写
真正有效的入口只有一个：form 元素的 submit 事件。这是唯一能保证“值修改发生在序列化之前”的时机。
在 form.addEventListener('submit') 中安全修改 input 值
必须在调用 event.preventDefault() 前或后修改 value，但要注意：只要没阻止默认行为，修改依然有效；阻止只是为了调试或改用 fetch 提交。
实操建议：
- 用
this.querySelector("input[name='xxx']")定位，比document.getElementById更健壮（避免跨表单污染） - 优先用
name属性查找，而非id—— 表单序列化依赖name，保持语义一致 - 对空值、非字符串类型做防御性判断，例如
if (input && input.value != null) - 修改后无需手动触发 change 事件，原生提交不依赖它
示例（手机号清洗）：
form.addEventListener('submit', function(e) {
const phone = this.querySelector("input[name='phone']");
if (phone && phone.value) {
phone.value = phone.value.replace(/[\s\-\(\)]/g, '');
}
});
回车键提交时，submit 事件照样触发
用户在文本框中按回车，只要表单内存在 type="submit" 按钮（显式或隐式），浏览器就会自动触发 form.submit 事件——和点击按钮完全等价。你不需要额外监听 keydown 或判断 event.key === 'Enter'。
容易踩的坑：
- 移除了
type="submit"按钮，改用type="button"+ 手动form.submit()，结果submit事件不触发（form.submit()是 DOM 方法，不触发事件） - 多个表单嵌套或动态插入，未给新表单重新绑定
submit监听器 -
textarea中按回车默认换行，不触发表单提交——除非它不是唯一可编辑字段，或焦点被脚本转移过
别在 blur 或 input 里做提交前清洗
这些事件发生在用户交互过程中，无法覆盖所有提交路径：用户可能跳过失焦直接按回车、可能粘贴后立刻提交、也可能禁用 JS 后绕过前端逻辑。它们适合实时反馈（如格式提示），不适合数据终态控制。
更危险的是：如果清洗逻辑含异步（比如调用 API 校验手机号），你根本无法阻塞原生提交流程——submit 事件是同步的，没有 await 的位置。
真正需要异步校验的场景，必须：
- 先
e.preventDefault() - 发起请求，成功后再手动收集数据、构造 FormData、用
fetch提交 - 或用
form.requestSubmit()（现代浏览器支持），它会触发约束验证并允许 await
复杂点在于：一旦引入异步，就彻底脱离了原生表单的自动序列化机制，name 和 value 的映射关系需自行维护，隐藏字段、文件输入、复选框多值等细节极易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
