required、type、pattern 是浏览器表单基础校验三要素，按序执行且短路；required 仅在原生提交时生效，type 仅作格式引导，pattern 自动锚定为 ^...$ 且不支持标志位，三者均不监听输入过程，需 js 补充实时反馈。
required、type、pattern 这三个属性是判断控件数据是否合法的最基础规则，浏览器在提交时会按顺序依次检查它们——只要任一条件不满足，就标记为无效，且不会继续执行后续校验逻辑。
required 只在原生提交时起作用
它不是“实时监听器”，而是表单提交拦截器。只有当用户点击 <input type="submit"> 或回车触发表单原生提交时，才会触发验证。
- 用
fetch()或axios.post()手动提交？required完全不生效，必须显式调用form.checkValidity() - 写了
event.preventDefault()却没做校验？表单会静默通过，用户看不到任何提示 - 按钮写成
type="button"而非type="submit"？验证链直接断裂，required形同虚设
type="email" 等内置类型验证非常宽松
浏览器只做最低限度的格式扫描，不校验域名是否存在、邮箱是否真实可用。
-
type="email"接受a@b.c、test@localhost甚至user@.com（部分旧版 Safari） -
type="url"允许http://x、https://123，不强制协议+域名+路径结构 -
type="number"对带单位的字符串（如"42px"）可能误判为有效，尤其在移动端软键盘下 - 这些类型主要影响输入法弹出样式和基础格式引导，不能替代正则或后端校验
pattern 正则会被自动锚定，且不支持标志位
你写的 pattern="abc" 实际等价于 ^abc$，不是“包含 abc”，而是“整个值必须严格等于 abc”。
- 想匹配“以 abc 开头”？写
pattern="abc.*"，别加^ - 想忽略大小写？不行——
pattern不支持i标志，得靠 JS 补充toLowerCase()或改写正则 - 中文字符范围
[\u4e00-\u9fa5]在部分安卓 WebView 中失效，建议降级到 JS 监听input事件做兜底 - 空字符串
""会被 pattern 视为不匹配，若字段允许为空，需额外配合required的有无来控制
真正容易被忽略的是：所有这些属性都只作用于用户最终提交那一刻的值，对中间输入过程完全无感；而用户往往在输错第一个字符时就需要反馈，这时候必须靠 JS 监听 input 或 blur 事件手动干预，否则“基础规则”就只是个半截子防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
