html5原生属性可搞定大部分基础校验：required保障非空，type="email"/"url"校验格式，min/max限制数值与日期范围，minlength/maxlength控长度，pattern配title实现自定义正则匹配；但联动校验、异步验证、条件必填等必须js补位。
纯靠 HTML5 原生属性就能撑起大部分表单校验需求，但必须清楚哪些能交由浏览器自动处理，哪些必须用 JS 补位——否则你会在 Safari 里发现 pattern 不触发、在 Chrome 里看到 required 提示被忽略、或在提交时才发现 minlength 根本没拦住空值。
哪些校验能直接用 HTML5 属性搞定
浏览器原生支持的校验不是“锦上添花”，而是可访问性与渐进增强的底线。只要属性写对、type 选准、用户不主动绕过，这些校验就稳定生效。
-
required对所有主流input类型（text、email、password、date等）都可靠，但对textarea和select同样有效，别漏掉 -
type="email"和type="url"的格式校验是浏览器内置逻辑，比手写正则更兼容（比如允许user@localhost），但不会校验域名是否存在 -
minlength/maxlength在input和textarea上表现一致；而min/max对number和date有效，对text无效 -
pattern必须配合title才能在报错时显示自定义提示，否则只显示浏览器默认文案（如 “请匹配所要求的格式”），用户根本看不懂
为什么 pattern 在某些浏览器里像没写一样
pattern 失效通常不是 bug，而是规则没被真正触发：它只在校验发生时（比如表单提交、或调用 checkValidity()）才起作用，不会监听实时输入。更关键的是，它的正则默认是“全字符串匹配”，但没加 ^ 和 $ 锚点，容易误判。
- 错误写法：
pattern="[0-9]{11}"—— 它会接受"abc12345678901def"，因为中间有连续 11 位数字就满足了 - 正确写法：
pattern="^[0-9]{11}$"，并加上title="请输入11位手机号" - Safari 对
pattern支持较晚（iOS 10.3+），旧版本会完全忽略；Android WebView 表现也参差，建议用type="tel"+pattern组合兜底 - 不要指望
pattern做密码强度实时反馈——它不响应input事件，只能用于提交前最终校验
如何让 :valid/:invalid 伪类真正可用
CSS 的 :valid 和 :invalid 是响应式反馈最轻量的方式，但它依赖浏览器对“有效性”的判断时机，而这个时机并不总是符合直觉。
- 初始加载时，空的
required字段是:invalid，但用户还没输任何内容，立刻红边框会吓到人——应配合:user-invalid（Chrome/Firefox 支持，Safari 尚未）或 JS 添加 class 控制首次反馈 -
type="email"字段在输入"a@"时就会变:invalid，但用户可能正打到一半；此时用:user-invalid更合理：只在用户离开该字段（blur）或提交后才激活样式 -
pattern字段在输入过程中不会动态更新:valid状态，只有提交或显式调用checkValidity()后才会刷新——所以不能单靠它做实时密码强度条 - 若用 JS 修改了
value，记得随后调用inputElement.reportValidity()，否则:valid状态不会同步
什么时候必须上 JavaScript 校验
HTML5 原生校验覆盖不了业务层逻辑，硬塞进去只会制造假安全感。以下场景 JS 不可替代：
- 两个字段联动校验，例如确认密码需与密码字段值完全一致——
pattern无法引用另一字段的值 - 异步验证，如用户名是否已被注册，这必须发请求，HTML 层做不到
- 条件必填，例如“选择‘其他’时，下方文本框才 required”——
required是静态属性，无法动态开关 - 自定义错误消息位置和形式，原生提示是 tooltip 或底部弹出，无法插入到字段下方或用 icon 标记
- 需要阻止粘贴（
paste事件）、限制输入字符（input事件过滤），这些行为原生属性完全不涉及
最容易被忽略的一点：哪怕你用了全套 HTML5 属性，只要没显式调用 form.checkValidity() 或监听 submit 事件并 e.preventDefault()，表单仍可能绕过校验直接提交——尤其当按钮是 type="button" 而非 type="submit" 时，浏览器根本不会触发原生校验流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
