ValidityState: valueMissing 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

ValidityState 接口的只读 valueMissing 属性指示一个 required 控件，例如 <input>、<select> 或 <textarea>，是否具有空值。

如果设置了 required 属性，并且未选择 <option>，或者 <textarea> 或用户可编辑的 <input> 为空，则 valueMissing 属性将为 true。仅当字段是必需的且没有值时，该属性才为 true；如果字段不是必需的，或者字段是必需的但有值，则该值为 false。

值

如果 ValidityState 未设置且 required 属性已设置，则此布尔值为 true。

缺少必需的输入值

以下示例检查数字输入元素的有效性。通过 min 属性添加了约束，该属性将输入的最小值设置为 18，并通过 required 属性禁止空值。如果用户输入的任何值不是大于 17 的数字，则该元素将验证失败，并应用与 :invalid 匹配的样式。

css

input:invalid {
  outline: red solid 3px;
}

body {
  margin: 0.5rem;
}
pre {
  padding: 1rem;
  height: 2rem;
  background-color: lightgrey;
  outline: 1px solid grey;
}

html

<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" required />

const userInput = document.getElementById("age");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.valid) {
    log("Input OK…");
  } else if (userInput.validity.valueMissing) {
    log("Required field cannot be empty.");
  } else {
    log(`Bad input detected: ${userInput.validationMessage}`);
  }
});

规范

规范
HTML # dom-validitystate-valuemissing-dev

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年5月30日⁩，由 MDN 贡献者编辑。

在 GitHub 上查看此页面 • 报告此内容的潜在问题