validity是HTML5表单控件的只读属性，返回ValidityState对象，含valueMissing、typeMismatch等布尔属性以精确标识校验失败原因，并需结合checkValidity()或invalid事件使用。
在 HTML5 表单中，validity 是每个表单控件（如 <input>、<textarea>、<select>）都具备的只读属性，它返回一个 ValidityState 对象。这个对象包含多个布尔型属性（如 valueMissing、typeMismatch、tooShort 等），用于精确反映当前输入值违反了哪条校验规则。
直接读取 validity 的具体属性判断失败原因
你可以通过点语法访问 validity 对象的各个状态属性：
-
element.validity.valueMissing：用户未填写必填字段（含required属性） -
element.validity.typeMismatch：输入值类型不匹配（如type="email"却输入 "abc"） -
element.validity.tooShort：长度小于minlength -
element.validity.tooLong：长度超过maxlength -
element.validity.patternMismatch：不满足pattern正则要求 -
element.validity.rangeUnderflow或rangeOverflow：数值超出min/max -
element.validity.valid：整体是否通过所有校验（所有相关属性均为false时为true）
结合 checkValidity() 主动触发并检查
checkValidity() 会触发浏览器默认校验，并返回布尔结果；同时确保 validity 状态是最新的（尤其在未失焦时）：
const input = document.querySelector('#email');
if (!input.checkValidity()) {
if (input.validity.valueMissing) {
console.log('邮箱不能为空');
} else if (input.validity.typeMismatch) {
console.log('请输入有效的邮箱地址');
}
}
监听 invalid 事件获取实时失败原因
当表单控件校验失败且浏览器准备显示默认提示时，会触发 invalid 事件。此时 validity 已准确反映问题：
立即学习“前端免费学习笔记（深入）”；
input.addEventListener('invalid', function(e) {
e.preventDefault(); // 阻止默认提示（可选）
const validity = e.target.validity;
if (validity.valueMissing) {
showCustomError(e.target, '此项为必填项');
} else if (validity.typeMismatch) {
showCustomError(e.target, '格式不正确');
}
});
注意 validity 状态的更新时机
validity 是实时计算的，但某些状态（如 valueMissing）仅在控件“被认为需要校验”时才有意义：
- 空值 +
required→valueMissing: true - 非空但格式错（如 type="number" 输入 "abc"）→
typeMismatch: true，valueMissing: false - 没有
required且为空 → 所有单项校验属性通常为false，valid: true
不要依赖 validity 判断“是否已输入”，而应结合 value 和具体属性逻辑判断。
