直接读 element.validity 会得到过时结果，因浏览器默认不校验未交互字段；须监听 input/blur 事件或调用 checkvalidity() 更新状态，并优先按 valuemissing→typemismatch→patternmismatch 等顺序判断错误类型。
直接读 element.validity 会得到过时结果
刚加载页面时，哪怕 <input required> 是空的，input.validity.valid 也可能是 true。浏览器默认不主动验证未交互过的字段，validity 只反映“当前静态状态”，不是“是否通过校验”的实时结论。
必须配合用户行为或显式触发验证逻辑：
- 监听
input或blur事件（比change更及时）再查validity - 调用
input.checkValidity()强制执行校验，并让validity属性更新为最新值 - 不要只看
validity.valid === false就判定失败——要具体检查哪个字段为true，否则无法区分是valueMissing还是patternMismatch -
disabled元素的validity始终全为false（包括valid: true），即使它本应合法
checkValidity() 和 reportValidity() 的关键区别
checkValidity() 只返回布尔值，不弹提示、不滚动、不中断流程；reportValidity() 会触发浏览器默认气泡提示，并自动聚焦到首个无效字段（Firefox 不自动滚动，需手动处理）。
常见误用场景：
- 在
submit事件里只调checkValidity()，结果表单照样提交——因为没阻止默认行为 - 想自定义错误文案却只设了
title，实际必须用setCustomValidity("错误信息") - 清空自定义错误后忘记调
setCustomValidity("")，导致后续校验一直失败 - 对
type="number"字段调reportValidity()，但粘贴了"123abc"后仍返回true——number类型对粘贴内容容忍度高，得配合min/max或额外 JS 判断
为什么 validity.valueMissing 有时不触发
valueMissing 只在字段有 required 属性且值为空字符串（input.value === ""）、或 <select></select> 未选中、或 <textarea></textarea> 为空时才为 true。但它不会因空格、换行符或仅含空白字符而激活。
容易被忽略的边界情况：
-
<input type="number" required>：空值时value是空字符串，valueMissing会生效；但输入" "（空格）后，value仍是空字符串，valueMissing不触发，badInput也不会——它只是被忽略 -
<input type="email" required>：输入"@"或"a@b"时，valueMissing为false，但typeMismatch为true -
pattern属性对空值静默——除非同时设了required，否则空值不会触发patternMismatch
真实项目里怎么安全取 validity 状态
别在初始化时就读 validity，也别在 form.submit() 中依赖它——这个方法绕过所有原生校验。要用 form.requestSubmit() 替代。
推荐做法：
- 监听
input事件，在回调里先调el.checkValidity()，再读el.validity - 判断错误类型优先级：一般按
valueMissing→typeMismatch→patternMismatch→tooShort/tooLong→ 其他顺序检查，和浏览器报错逻辑一致 - 对
type="email"或type="url"，别信它的宽松校验，真正要严格匹配就换type="text"+pattern+title - 自定义组件（如 React 封装的
<myinput></myinput>）没有validity，必须手动透传原生<input>的validity或模拟逻辑
validity 不是开关，是快照；它不决定行为，只反映状态。真正驱动校验的是你什么时候调 checkValidity()，以及用户有没有真的 interaction。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
