ValidityState: badInput 属性

Baseline 已广泛支持

此功能已成熟，并可在许多设备和浏览器版本上运行。自 2018 年 12 月起，所有浏览器均支持此功能。

ValidityState 接口中只读的 badInput 属性指示用户输入了浏览器无法转换的内容。例如，如果有一个数字输入框，其内容是字符串。

值

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

示例

检测无效输入

下面的示例检查一个数字输入框的有效性。如果用户输入的是文本而不是数字，该元素将无法通过约束验证，并且会应用与 input:invalid 匹配的样式。当元素的 badInput 求值为 true 时，输入框上方的 <pre> 元素会显示验证消息。

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" />

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}`);
  }
});

规范

规范
HTML # dom-validitystate-badinput-dev

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

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

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