validity属性返回validitystate对象，其布尔属性包括valuemissing、typemismatch、patternmismatch、toolong、rangeunderflow、rangeoverflow、stepmismatch、customerror和valid。
validity对象有哪些可用的布尔属性
validity 是每个表单控件（<input>、<textarea></textarea>、<select></select>）都有的只读属性，返回一个 ValidityState 对象。它本身不“触发”校验，只是反映当前值在浏览器规则下的状态。你得先让浏览器执行一次校验（比如用户提交、调用 checkValidity() 或 reportValidity()），它的属性才真正有意义。
常见可用布尔属性包括：valueMissing、typeMismatch、patternMismatch、tooLong、rangeUnderflow、rangeOverflow、stepMismatch、customError。它们互不排斥——一个字段可能同时为 true 多个，但浏览器只会按优先级显示其中一条错误（比如 valueMissing 优先于 typeMismatch）。
如何准确读取失败原因并避免误判
直接读 input.validity.valueMissing 这类属性没问题，但要注意：这些值只在控件处于“可验证状态”时才可靠。如果控件被设为 disabled、hidden，或父 <form></form> 带了 novalidate，willValidate 会是 false，此时所有 validity 属性都失去意义。
- 务必先检查
input.willValidate === true，否则读出来的validity是空壳 -
validity.valid是汇总结果（所有子项都为false才为true），但它不告诉你哪条错了；要定位原因，必须逐个查子属性 - 不要只依赖
validity.customError判断是否自定义出错——它为true仅表示setCustomValidity()被传入非空字符串，不代表其他规则没触发；实际错误可能是valueMissing和customError同时存在 - Safari 对
date、time类型的validity支持不稳定，建议 fallback 到input.value.length或pattern配合判断
结合 validationMessage 获取对应提示文本
input.validationMessage 会返回浏览器根据当前首个 true 的 validity 属性生成的默认提示文字。它不是固定字符串，而是动态计算的——比如 valueMissing 为 true 时返回 “请填写此字段”，typeMismatch 为 true 且 type="email" 时返回 “请输入有效的电子邮件地址”。
这个值只有在校验已触发后才有内容。常见误用是：在用户还没输入、也没调过 checkValidity() 就去读它，结果为空字符串。
- 安全读法：
if (!input.checkValidity()) { console.log(input.validationMessage); } - 它和
validity属性是联动的，但不能反推——比如看到提示是 “请填写此字段”，不能 100% 断定就是valueMissing，因为某些自定义消息也可能覆盖成一样文字 - 若用了
setCustomValidity("用户名已存在")，validationMessage就等于该字符串，此时validity.customError为true，其他属性可能全为false
为什么 validity.typeMismatch 在 type="email" 时总不生效
这不是 bug，是浏览器行为细节：当 input 的 type="email"，但值为空或只含空白字符时，valueMissing 优先级高于 typeMismatch，所以即使你输了个 "abc"，只要字段没设 required，浏览器根本不会进入类型校验阶段。
- 要让
typeMismatch触发，字段必须同时满足两个条件：有值（哪怕非法），且willValidate === true - 典型陷阱：写了
type="email"却漏了required，用户输 "abc" 后点提交，validity.valueMissing是false，但validity.typeMismatch仍是false——因为浏览器认为“有值”就跳过必填检查，但又没主动对非空非法值做类型校验（除非你手动调checkValidity()） - 修复方式：要么加
required，要么在 JS 中显式调用input.checkValidity()强制触发全量校验 - 注意：Chrome 和 Firefox 对非空非法值的
typeMismatch行为基本一致，但 Safari 有时会忽略，建议始终用pattern显式兜底，例如pattern=".+@.+\..+"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
