HTML5原生验证属性（required、pattern、type）够用但不够稳，必须结合JavaScript调用Constraint Validation API（如checkValidity、setCustomValidity、reportValidity）才能控制反馈时机、定制提示内容并实现实时校验，纯HTML属性仅在submit时触发且存在校验漏洞。
原生 required、pattern 和 type 属性够用，但必须配合 JavaScript 主动调用验证 API 才能真正控制反馈时机和内容——纯靠 HTML 属性只在 submit 时触发，用户根本看不到错误就跳走了。
为什么表单一提交就刷新、错误一闪而过
浏览器原生验证默认只在 submit 事件中触发，且不阻止页面跳转，除非你显式调用 event.preventDefault()。更关键的是：required 不校验空格、type="email" 允许 foo@bar 这种非法格式、pattern 若没加 ^$ 锚定，会把 abc123def 当作匹配 [0-9]{3} 的合法值。
- 所有原生属性（
required、minlength、pattern）都依赖用户“主动提交”才激活，input或blur时不自动提示 -
pattern="[a-z]{3,}"是错的，应写成pattern="^[a-z]{3,}$" - 用 JS 直接赋值
input.value = ""不会重置验证状态，得手动调input.setCustomValidity("")
怎样让错误提示立刻出现、不跳页
核心是拦截默认行为 + 主动触发验证 + 控制提示文案。不要只监听 submit，要结合 input（实时）、blur（失焦）和 submit（兜底）三类事件。
- 对单个字段校验失败时，先调
input.setCustomValidity("请输入英文姓名")，再调input.reportValidity()—— 后者才会弹出气泡 - 对整个表单，用
form.reportValidity()可批量触发所有子项验证，但 Firefox 不自动滚动到第一个错误字段 - 想清空自定义错误？必须调
input.setCustomValidity("")，设成空字符串，不是null或undefined - 禁用原生验证要用
，加在form标签上，加在按钮或 input 上完全无效
正则和 JS 校验怎么配合才不翻车
原生 pattern 只能做简单格式断言，复杂逻辑（如两次密码一致、用户名是否已存在、中文姓名长度+字符限制）必须用 JS。但 JS 不该重复造轮子——优先复用 checkValidity() 返回值，再叠加业务规则。
- 邮箱校验别只信
type="email"，用正则/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/再过一遍 - 密码强度建议用
/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(pwd)，比 pattern 更可控 - 中文姓名建议用
^[\u4e00-\u9fa5]{2,4}$|^([a-zA-Z]+\s)*[a-zA-Z]+$，覆盖中英文常见组合 - 异步校验（如查重）必须配合
blur而非input，避免每敲一个字就发请求
最易被忽略的一点：无论你用多严密的前端验证，novalidate 关掉原生校验后，所有逻辑都得自己补全——包括空值判断、类型转换、边界值处理，否则用户绕过 JS 就能发任意数据。服务端永远是最后一道防线，前端只是体验层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
