HTMLObjectElement: setCustomValidity() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

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

语法

js
setCustomValidity(errorMessage)

参数

errorMessage

用于有效性错误的的消息。

返回值

无(undefined)。

异常

无。

示例

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

js
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();
}

如果不存在错误,则必须将消息设置为空字符串。只要错误消息不为空,表单将无法通过验证且不会被提交。

规范

规范
HTML
# dom-cva-setcustomvalidity-dev

浏览器兼容性

另见