html实现validity状态属性_html ValidityState表单验证状态属性【整理】-html教程-PHP中文网

validitystate 是浏览器在原生表单控件（如）上自动暴露的只读属性，通过 element.validity 访问，反映实时验证状态；它不可手动创建，不触发验证，仅提供当前合法性信息。

html实现validity状态属性_html validitystate表单验证状态属性【整理】

ValidityState 是什么，它在哪能用

ValidityState 不是一个可手动创建的对象，而是浏览器在表单控件（如 <input>、<select></select>、<textarea></textarea>）上自动暴露的只读属性，通过 element.validity 访问。它反映当前元素的实时验证状态，比如是否为空、格式是否合法、是否超出范围等。

它只在原生表单控件上存在，自定义组件（如 React 封装的输入框）默认没有这个属性——除非你手动透传或模拟。注意：它不触发验证，也不提交表单，只是“告诉你现在是不是合法”。

常见 validity 属性及对应触发条件

调用 inputElement.validity 返回一个对象，里面一堆布尔值。关键字段有：

valid：所有验证都通过才为 true；只要任一其他字段为 true（即存在错误），它就是 false
valueMissing：必填（required）但值为空字符串或未选中
typeMismatch：类型不匹配，比如 type="email" 但输入了 foo；type="url" 但没写 http://
patternMismatch：pattern 正则不匹配（注意：空值不会触发此项，除非同时设了 required）
tooLong / tooShort：超出 maxlength 或低于 minlength
rangeOverflow / rangeUnderflow：数值或日期超出 max/min
stepMismatch：比如 type="number" step="0.5"，却输入了 1.2
badInput：用户输入了根本无法解析的值，比如 type="number" 里输 abc

这些字段互斥性不强——一个输入可能同时触发 valueMissing 和 typeMismatch，但实际中浏览器通常只激活最“优先”的一项（例如空值时优先报 valueMissing，而非 typeMismatch）。

如何安全读取 validity 并避免误判

直接读 input.validity.valid 看似简单，但容易踩坑：表单刚加载时，哪怕输入框是空的且 required，validity.valid 也可能是 true——因为浏览器默认不主动验证未交互过的字段。

所以真实场景中必须配合用户行为或显式验证：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

监听 input 或 blur 事件再查 validity，比监听 change 更及时（change 在失焦后才触发）
调用 input.checkValidity() 会强制触发验证逻辑，并返回布尔结果，同时让 validity 属性更新为最新状态
不要仅靠 validity.valid === false 判定错误——要具体看哪个字段为 true，否则无法给出准确提示（比如把 tooShort 错当成 typeMismatch）
validity 对 disabled 元素始终返回全 false（包括 valid: true），即使它本应不合法

示例：

const input = document.querySelector('input[required]');
input.addEventListener('blur', () => {
  if (!input.checkValidity()) {
    const { valueMissing, tooShort, patternMismatch } = input.validity;
    if (valueMissing) console.log('不能为空');
    else if (tooShort) console.log(`至少 ${input.minLength} 个字符`);
    else if (patternMismatch) console.log('格式不对');
  }
});