ValidityState: valueMissing 属性

基线 广泛可用

此功能非常成熟，可在许多设备和浏览器版本上运行。它已在所有浏览器中可用，从 2018 年 12 月.

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;
}
html
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" required />
js
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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅