ValidityState: customError 属性

基线 广泛可用

此功能已得到良好建立，并且可在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用 2018 年 12 月.

ValidityState 接口的只读 customError 属性在元素不满足元素的 setCustomValidity() 方法设置的自定义有效性要求时返回 true。

值

如果自定义错误消息已设置为非空字符串，则为 true 的布尔值。

示例

检测自定义错误

在此示例中，setCustomValidity() 在表单提交包含被视为无效的用户输入时设置自定义错误消息。“验证输入”按钮调用 reportValidity()，如果用户输入的值与表单约束不匹配，则会在元素下方显示验证消息。

如果输入文本“good”或“fine”并尝试验证输入，则该字段将标记为无效，直到清除自定义错误消息（设置为空字符串）。为了进行比较，输入元素上有一个 minlength 属性，当用户输入的字符少于两个时，它允许我们演示 tooShort 有效性状态。当表单控件中的值无效时，即使没有自定义错误，输入也会带有红色边框。

HTML

html
<pre id="log">Validation failures logged here...</pre>
<input
  type="text"
  id="userInput"
  placeholder="How do you feel?"
  minlength="2" />
<button id="checkButton">Validate input</button>

CSS

css
input:invalid {
  border: red solid 3px;
}

JavaScript

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

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

const check = (input) => {
  // Handle cases where input is too vague
  if (input.value == "good" || input.value == "fine") {
    input.setCustomValidity(`"${input.value}" is not a feeling.`);
  } else {
    // An empty string resets the custom validity state
    input.setCustomValidity("");
  }
};

userInput.addEventListener("input", () => {
  check(userInput);
});

const validateInput = () => {
  userInput.reportValidity();
  if (userInput.validity.customError) {
    // We can handle custom validity states here
    log("Custom validity error: " + userInput.validationMessage);
  } else {
    log(userInput.validationMessage);
  }
};

checkButton.addEventListener("click", validateInput);

结果

规范

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

浏览器兼容性

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

另请参阅