HTML表单原生验证仅在submit事件中触发，依赖正确表单结构（如form包裹、button type="submit"）、元素类型（pattern仅对text类生效）及用户交互（未blur前:invalid不生效），缺一即失效。
HTML表单原生验证不是“加了required就自动弹提示”，它只在submit事件中批量触发，且严重依赖表单结构、元素类型和用户交互时机——错一个环节，整个验证链就静默失效。
为什么点提交按钮没反应、也不报错
最常见原因是提交行为绕过了原生验证流程：
-
<button></button>默认是type="button"，不会触发验证；必须显式写成<button type="submit"></button> - JS 里调用
form.submit()是纯脚本提交，完全跳过所有约束检查；应改用form.requestSubmit() - 表单被
display: none或visibility: hidden隐藏时，带required的字段不参与校验 -
novalidate属性如果误加在<button></button>或<input>上，无效；它只对<form novalidate></form>生效
pattern写了却总通过，或者匹配太松
pattern本质是全字符串正则匹配，但浏览器实现有隐含行为：它自动加上^和$锚定，所以pattern="[0-9]+"等价于^[0-9]+$。问题往往出在别处：
- 正则本身没覆盖边界情况，比如
pattern="\d{11}"会匹配"abc12345678901def"（因未禁用贪婪匹配）；应配合title提示，并用^1[3-9]\d{9}$明确收尾 -
pattern对type="number"或type="date"无效，只作用于text、email、tel等文本类类型 - 空值不归
pattern管——它只校验非空输入；必填仍要靠required配合 - 中文匹配慎用
\u4E00-\u9FA5，部分旧版 Safari 解析异常；推荐[\u4e00-\u9fa5]（无反斜杠转义）
想实时反馈？不能只靠submit事件
原生验证默认不监听input或blur，必须手动介入：
- 在
input事件中调input.checkValidity()判断状态，但不显示提示；要弹气泡得用input.reportValidity() -
reportValidity()在 Chrome 会自动滚动到错误字段，在 Firefox 不会——若需统一行为，得自己scrollIntoView() - 每次校验前必须先清空自定义错误：
input.setCustomValidity('')；否则一旦设过，后续哪怕输入合法也始终返回false - 不要在
invalid事件里直接setCustomValidity()，它会无限循环；应在input或blur中做判断后设置
:valid和:invalid伪类为什么样式没变
这两个伪类受用户交互影响极大，不是“值一变就立刻响应”：
- 初始加载时，未聚焦过的
required字段是:valid状态，哪怕为空；直到用户blur或提交后才可能变:invalid -
validity.valid为true不代表字段“已通过验证”，只是“当前值不违反任何约束”；例如type="email"填a@b.c也返回true - 修改值后未触发重验（如 JS 赋值），
:invalid不会自动更新；需主动调checkValidity()或等待下一次submit - 自定义错误文案由
setCustomValidity()控制，它会覆盖validity对象中的所有错误类型，导致validity.patternMismatch等布尔值失去意义
真正难的不是写对pattern或required，而是理解浏览器何时“认为该验了”、何时“认为验完了”、以及如何让 JS 和原生机制不互相覆盖状态——这些边界条件，恰恰是调试时最耗时间的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
