ValidityState: badInput 属性

基线 广泛可用

此功能已经相当成熟，并且在许多设备和浏览器版本上都能正常工作。它从 2018 年 12 月.

报告反馈

值

ValidityState 接口的只读 **badInput** 属性指示用户是否提供了浏览器无法转换的输入。例如，如果您有一个数字输入元素，其内容为字符串。

示例

如果 ValidityState 对象不符合预期类型，则为 true 的布尔值。

检测错误输入

以下示例检查 数字输入元素 的有效性。如果用户输入文本而不是数字，则元素将无法通过约束验证，并且将应用与 input:invalid 匹配的样式。<pre> 元素位于输入元素上方，显示当元素 badInput 评估为 true 时的验证消息。
input:invalid {
  outline: red solid 3px;
}
css
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" />
html
const userInput = document.getElementById("age");
const logElement = document.getElementById("log");

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

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.badInput) {
    log("Bad input detected: " + userInput.validationMessage);
  }
});

规范

js
规范
# HTML 标准

浏览器兼容性

dom-validitystate-badinput-dev

另请参阅