required 和 pattern 不能叠加生效，因浏览器校验顺序固定：空值时仅触发 valuemissing，patternmismatch 完全不执行；pattern 仅对 text、email、tel 等文本类型有效，且需显式加 ^$ 锚定；自定义校验须用 setcustomvalidity() + reportvalidity()，submit 按钮必须为 type="submit" 或调用 requestsubmit()。
required 和 pattern 不能简单叠加生效——浏览器校验顺序固定，空值时直接报 valueMissing，pattern 根本不触发。
为什么 required + pattern 一起用，pattern 总是不生效
这不是 bug，是 HTML 规范定义的校验优先级：valueMissing（空值）→ typeMismatch / badInput → patternMismatch。只要 input.value === ''，后续所有规则（包括 pattern）都会跳过。
- 用户没输任何内容就点提交 → 只看到“请填写此字段”，不会提示“手机号格式错误”
- 哪怕你写了
pattern="^1[3-9]\d{9}$"，空值时它完全不参与判断 - 想让 pattern 在非空时才起作用，必须确保字段已填、且不是空字符串（注意：空格不算有效输入）
pattern 正则必须加 ^ 和 $ 才能全匹配
浏览器对 pattern 的匹配逻辑是“整个字符串必须完全匹配”，但正则引擎默认不锚定——pattern="[0-9]{11}" 实际等价于 /[0-9]{11}/，会误判 "abc12345678901def" 合法。
- 正确写法是
pattern="^1[3-9]\d{9}$"或pattern="^[A-Za-z]{1,20}$" - 不要依赖浏览器自动补 ^$，显式写出更可靠
-
pattern对type="number"或type="date"无效，只作用于text、email、tel等文本类类型
用 setCustomValidity() 接管校验时机和提示文案
原生验证只在 submit 时触发，且无法覆盖默认提示；要实现“输入即反馈”或自定义文案，必须用 setCustomValidity() + reportValidity() 主动控制。
-
input.setCustomValidity("手机号格式错误")→ 立即标记为 invalid，但 UI 不显示，需后续调reportValidity()或触发 submit -
input.setCustomValidity("")→ 清除自定义错误，恢复 validity 状态（注意：不是“通过”，只是取消自定义错误） - 常见坑：用户开始输入后没清空旧错误，导致
setCustomValidity("")没被调用，后续永远校验失败 - 推荐在
input或blur事件里做即时校验，而不是只等 submit
submit 按钮必须是 type="submit"，否则整个验证链断裂
<button></button> 默认是 type="button"，点击不会触发原生验证；form.submit() 是 JS 方法调用，也绕过验证流程。
- 必须用
<button type="submit"></button>或<input type="submit"> - 如果要用 JS 控制提交，改用
form.requestSubmit()，它会触发完整验证流程 - 隐藏元素（
display: none或visibility: hidden）上的required字段会被跳过校验
真正麻烦的不是写对正则，而是理解浏览器什么时候、按什么顺序、对什么状态做检查——漏掉任一环节，required 和 pattern 就像贴了张失效的封条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
