HTML5 中怎么使用 validity 属性对象获取校验失败的具体原因如 valueMissing 或 typeMismatch-H5教程-PHP中文网

validity是html5表单控件的只读属性，返回validitystate对象，含valuemissing、typemismatch等布尔属性以精确标识校验失败原因，并需结合checkvalidity()或invalid事件使用。

html5 中怎么使用 validity 属性对象获取校验失败的具体原因如 valuemissing 或 typemismatch

在 HTML5 表单中，validity 是每个表单控件（如 <input>、<textarea></textarea>、<select></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 状态是最新的（尤其在未失焦时）：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

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, '格式不正确');
  }
});