HTMLObjectElement: setCustomValidity() 方法

基线 广泛可用

此功能已成熟，可以在许多设备和浏览器版本中正常运行。它自 2018 年 12 月.

报告反馈

语法

setCustomValidity() 方法是 HTMLObjectElement 接口的一种方法，用于为元素设置自定义有效性消息。
setCustomValidity(errorMessage)

js

参数

errorMessage

用于有效性错误的消息。

返回值

无 (undefined).

异常

示例

无。

setCustomValidity() 方法是 HTMLObjectElement 接口的一种方法，用于为元素设置自定义有效性消息。
function validate(inputID) {
  const input = document.getElementById(inputID);
  const validityState = input.validity;

  if (validityState.valueMissing) {
    input.setCustomValidity("You gotta fill this out, yo!");
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity("We need a higher number!");
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity("Thats too high!");
  } else {
    input.setCustomValidity("");
  }

  input.reportValidity();
}

在本例中，我们传递输入元素的 ID，并根据值是否缺失、过低或过高设置不同的错误消息。请注意，消息不会立即显示。尝试提交表单将显示消息，或者您可以在元素上调用 reportValidity() 方法。

规范

如果没有任何错误，则将消息设置为空字符串至关重要。只要错误消息不为空，表单就不会通过验证，也不会提交。
规范
# HTML 标准

浏览器兼容性

dom-cva-setcustomvalidity-dev

另请参阅