html表单验证与正则匹配本质不同，但可通过pattern属性交集；pattern仅支持ecmascript语法、隐式全匹配、依赖title提示，且无法跨字段联动、动态生成或获取分组，故需html+js+后端三层校验协同。
HTML表单验证和正则匹配不是一回事，但可以共存
HTML原生的 required、type="email"、minlength 等验证机制，底层不依赖 JavaScript 正则，也不执行你写的 /^[a-z]+$/。它走的是浏览器内置的约束校验（Constraint Validation API），触发时机、错误提示、可编程性都和手动调 RegExp.prototype.test() 完全不同。
但你可以用 pattern 属性把正则“塞进”HTML验证流程里——这时两者才产生交集。
pattern 是唯一让正则参与HTML验证的入口
pattern 的值必须是 ECMAScript 正则语法的字符串（不带 /g 标志，且隐式全匹配，即等价于 ^...$）：
<input type="text" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" title="请输入格式为 XXX-XX-XXXX 的社保号">
- 浏览器会自动在前后加上
^和$，所以写pattern="abc"实际匹配的是^abc$，不是abc子串 - 不支持
g、m、y等标志，写了也忽略 - 错误提示文案靠
title属性控制，没写title时用浏览器默认文案，不可定制样式 - 只对
type="text"、"search"、"tel"、"url"、"email"、"password"有效；type="number"忽略pattern
HTML验证不能替代正则匹配的三个硬伤
如果你指望纯 HTML 验证完成业务级校验，很快会撞墙：
- 无法做跨字段联动（比如“确认密码”需和“新密码”一致），
pattern只能作用于单个<input> - 无法动态生成正则（比如根据用户选择的国家切换手机号格式规则），
pattern是静态字符串 - 无法获取匹配分组或中间状态（如提取邮箱用户名部分），
pattern只返回布尔结果 - 移动端软键盘行为不受控：比如
type="number"在 iOS 上仍可能唤出字母键盘，仅靠 HTML 无法彻底拦截非法字符输入
什么时候该用 HTML 验证，什么时候必须写 JS 正则
优先用 HTML 验证的场景：
- 基础格式兜底（如邮箱、URL、数字范围），配合
title给用户轻量提示 - 表单提交前的快速拦截，避免无意义的 JS 执行和后端请求
- 无障碍访问（screen reader 会读出
title和错误状态）
必须补 JS 正则的场景：
- 需要实时反馈（如密码强度条，每输一个字就 retest）
- 要解析内容（如从身份证号中取出生年月、地区码）
- 服务端校验逻辑必须和前端一致，而服务端用的是完整正则引擎（支持 Unicode 属性、lookbehind 等）
- 要兼容老浏览器（IE10- 不支持
pattern，得降级到 JS 校验）
真正健壮的方案永远是：HTML 做声明式约束 + JS 做命令式校验 + 后端做最终拍板。三者覆盖的边界不一样，少哪一层都容易漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
