HTML5表单验证需用checkValidity()或reportValidity()触发，submit时应preventDefault()阻止默认提交；pattern须匹配整串且勿加^$；validity对象可精确定位错误类型；动态修改约束后需手动校验。
表单提交前用 checkValidity() 验证原生约束
HTML5 表单自带的 required、type="email"、pattern 等属性，只有在调用 checkValidity() 或触发原生提交时才会真正校验。很多人直接监听 submit 事件却没阻止默认行为，导致验证失败仍发请求。
正确做法是：在 submit 事件里先调用 form.checkValidity()，返回 false 就 event.preventDefault()，让浏览器显示默认提示（如红色边框 + tooltip）。
-
checkValidity()不会触发invalid事件，但会激活浏览器内置 UI 反馈 - 它只检查当前启用且未被
disabled的字段，display: none的元素仍参与校验 - 对自定义校验（比如密码二次确认），得手动设置
setCustomValidity("错误信息")，否则checkValidity()总返回true
用 reportValidity() 强制显示所有验证错误提示
reportValidity() 是 checkValidity() 的增强版：它不仅校验，还会主动触发浏览器的错误提示（包括 title 属性内容、setCustomValidity() 设置的文案），适合用户点击“下一步”或“保存草稿”这类非提交操作。
- 不依赖
submit事件，可随时调用，比如在 Tab 切换前校验当前页字段 - 对
type="number"字段，空值或非法字符（如 "12a"）都会触发提示；但注意 Chrome 对min/max的校验仅在输入失焦后才生效 - IE 不支持，需降级为手动遍历
elements并调用每个控件的checkValidity()
正则 pattern 属性必须匹配整个字符串
pattern 实际上等价于 ^your-pattern$，不是 test() 那种部分匹配。写错会导致看似合法的输入被拒绝，比如邮箱常用 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"，漏掉结尾 $ 就可能放过 "user@domain.com.extra"
立即学习“前端免费学习笔记（深入）”；
- 不要在 pattern 里加
^和$—— 浏览器自动加上了 - 中文、emoji 等 Unicode 字符需用
\p{Script=Han}（需pattern加u标志，但目前仅 Chrome 支持） - 移动端键盘类型（如
inputmode="numeric"）和pattern联动效果不稳定，iOS Safari 常忽略pattern导致验证失效
JavaScript 手动校验时别忽略 validity 对象细节
input.validity 是个只读对象，包含 valueMissing、typeMismatch、patternMismatch、tooShort 等布尔字段，比单纯看 checkValidity() 返回值更能定位问题。
-
validity.valid为false时，不一定代表用户输错了——可能是字段被设为required但为空，也可能是step不匹配（如type="number" step="0.1"输入了0.15） -
validity.customError为true表示调用了setCustomValidity("xxx")且参数非空字符串；清空需传空字符串：input.setCustomValidity("") - 动态修改
min/max后，已输入的值不会自动重校验，要手动调用input.checkValidity()
最常被跳过的其实是 inputmode 和 autocomplete 对预检的影响：它们不改变校验逻辑，但会干扰用户输入习惯，间接导致格式错误率上升。比如 inputmode="numeric" 在安卓上可能弹出纯数字键盘，用户却想输带小数点的价格——这时候光靠 pattern 挡不住，得配合 type="text" + 自定义 JS 校验。
