html表单验证属性必须嵌套在内且由type="submit"触发才生效；required失效多因控件未包含在form中或按钮类型错误；pattern自动添加^$且仅对文本类input有效；min/max在number和date上行为不同；setcustomvalidity需手动清空否则永久无效。
HTML 表单验证属性必须嵌套在 <form></form> 内、由 type="submit" 触发，脱离这个上下文就完全不生效。
required 不起作用？先看是不是丢在 <form></form> 外面
加了 required 却没报错，90% 是因为输入控件没包进 <form></form> 标签，或者提交按钮用了 type="button"。浏览器只在原生 submit 事件中检查 required，不依赖 JS 就跑，但前提是结构合法。
-
<input required>必须是<form></form>的直接或间接子元素 - 触发提交的按钮得是
<button type="submit"></button>或<input type="submit">，type="button"点了也白点 - 用 JS 调
form.submit()会触发验证；但用element.click()模拟点击type="button"就不会 -
display: none隐藏的required字段仍参与校验；要用hidden属性或移除 DOM 才跳过
pattern 正则写不对？记住它自动加 ^$ 且不支持 flag
pattern 只对 type="text"、"email"、"tel" 等文本类类型有效，type="number" 上写了也忽略。而且浏览器会悄悄把你的正则包进 ^...$，你再写 ^ 或 $ 就直接报 Invalid regular expression。
- 想限制 6–12 位字母数字：
pattern="[a-zA-Z0-9]{6,12}"✅，不是^[a-zA-Z0-9]{6,12}$❌ - 想排除开头为数字：
pattern="(?!\d)[a-zA-Z0-9]{6,12}"（注意 JS 字符串里要双反斜杠） - 中文必须显式写出范围：
pattern="[\u4e00-\u9fa5a-zA-Z0-9]{2,10}"，\w不匹配汉字 - 移动端软键盘会响应
pattern：写[0-9]弹数字键盘，但[a-z]不保证弹英文键盘
min/max 在 number 和 date 上表现完全不同
min 和 max 看似一样，实际行为割裂严重。对 type="number" 是实时拦截（输 9 到 min="10" 的框里会被卡住），而对 type="date" 只在提交时校验，且 step 完全无效。
-
type="number" min="10"：用户无法手动输入小于 10 的值，粘贴"5"会被清空 -
type="date" min="2023-01-01"：选 “9999-99-99” 不报错（浏览器不校验日期合法性），只校验字符串格式是否为 ISO（"2023-1-1"或"2023/01/01"都解析失败，value变空，触发valueMissing） -
step="any"允许任意小数；step="0.1"不代表“最多一位小数”，填1.01仍失败 -
type="date"的min/max值必须是完整YYYY-MM-DD格式，少一位都不行
setCustomValidity 后忘了清空？字段就永远 invalid
只要 setCustomValidity("xxx") 的参数是非空字符串，该字段就永久判定为无效——哪怕用户已填对内容。这是最容易被忽略的坑，导致表单死活提交不了。
- 每次输入后都必须调一次
input.setCustomValidity("")，否则错误状态残留 - 监听
input或blur事件重置，别只在invalid里设错误却不清理 - 多个关联字段（如密码确认）要分别调
setCustomValidity，只在一个上设，另一个照样通过 - 用
event.preventDefault()拦invalid事件时，必须配setCustomValidity，否则字段一直卡在 invalid 状态
原生验证只管提交那一刻的状态，不监控中间过程；所有 pattern、min、required 都依赖用户最终触发 submit，服务端校验一步都不能省。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
