回车触发校验需表单结构、按钮类型、提交方式三者严格匹配：必须用包裹，含type="submit"按钮，原生required/pattern才生效；cancel按钮须显式设type="button"；禁用preventdefault()而应先checkvalidity()或用requestsubmit()。
回车触发时执行校验，本质是让原生 HTML5 验证在 Enter 按下瞬间真正起作用——这要求表单结构、按钮类型、提交方式三者严格匹配，缺一不可。
必须用 <form></form> 包裹且含 type="submit" 按钮
原生 required、pattern 等属性只在表单原生提交流程中激活。如果只是 <input> + <button onclick="submitForm()"></button>，回车根本不会触发任何验证。
-
<button></button>不写type属性 → 默认为submit，但易与 Cancel 按钮冲突（见下一条） -
<button type="button"></button>→ 完全不参与提交流程，回车无视它 - 多个
type="submit"按钮时，回车总触发第一个（DOM 顺序），不是视觉上最靠右那个 - 移动端软键盘的「完成」或「搜索」键，行为等同于桌面端
Enter，同样依赖此结构
避免 Cancel 按钮被意外触发
当表单里有 <button>Cancel</button>（没写 type），它默认就是 submit 类型。此时哪怕光标在 <input> 上，按 Enter 也会先点它——因为它是 DOM 中第一个可提交按钮。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 显式写成
<button type="button" onclick="...">Cancel</button>，彻底排除干扰 - 若用
<input type="button">，它默认不是submit，安全但语义弱于<button></button> - 别依赖 CSS 隐藏按钮（
display: none）来“屏蔽”其提交能力——隐藏的type="submit"按钮仍会被回车选中
不要在 submit 事件里直接 preventDefault()
常见错误：监听 form.submit，立刻 e.preventDefault()，再手动调用 fetch()。这会导致原生验证完全失效——required 不报错、pattern 不拦截、reportValidity() 返回 true 却不显示提示。
- 正确做法：先调用
form.checkValidity()，仅当返回true时才继续后续逻辑 - 或者改用
form.requestSubmit()—— 它会强制触发验证并派发submit事件，但不绕过校验 - 若需兼容旧浏览器（如 IE），只能退回到手动遍历
form.elements+element.validity.valid判断
textarea 和中文输入法下的特殊处理
<textarea></textarea> 在回车时默认换行，不提交；但若它在 <form></form> 内且存在 type="submit" 按钮，用户按 Ctrl+Enter（或某些 IME 的确认键）可能触发表单提交——这不是 bug，是规范允许的行为。
- 中文输入法下，
input的input事件在“上屏后”才触发，所以实时校验不会误判拼音过程；但原生required校验仍只发生在提交瞬间 - 想让
textarea支持回车提交，需 JS 监听keydown并判断event.key === 'Enter' && !event.shiftKey，再手动form.requestSubmit() - 别给
textarea加onkeypress="if(event.keyCode===13) {...}"——keyCode已废弃，且无法区分换行与提交意图
最易被忽略的一点：验证是否生效，和元素是否在视口内、是否被 disabled 或 hidden 属性控制强相关。一个 required 的 <input style="display:none">，即使值为空，也不会在校验中被检查——浏览器直接跳过它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
