ValidityState: tooShort 属性

基线 广泛可用

此功能已十分成熟，并在许多设备和浏览器版本中都能正常使用。它在所有浏览器中均可使用，自 2018 年 12 月.

ValidityState 接口的只读 tooShort 属性指示 <input>、<button>、<select>、<output>、<fieldset> 或 <textarea> 元素的值在用户编辑后是否小于该元素的 minlength 属性所确定的最小代码单元长度。

值

如果 ValidityState 不符合约束条件，则为 true 的布尔值。

示例

字符串值太短的输入

以下示例检查 文本输入元素 的有效性。使用 minlength 属性 添加了约束条件，因此输入需要一个至少包含 4 个字符的字符串。如果用户输入的字符串太短，则元素无法通过约束验证，并将应用与 :invalid CSS 伪类匹配的样式。

css
input:invalid {
  outline: red solid 3px;
}
html
<pre id="log">Validation logged here...</pre>
<input type="text" id="userText" minlength="4" />
js
const userInput = document.getElementById("userText");
const logElement = document.getElementById("log");

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

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.tooShort) {
    log("Not enough characters entered.");
  } else {
    log("Input is valid…");
  }
});

规范

规范
HTML 标准
# dom-validitystate-tooshort-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见