HTMLInputElement: setCustomValidity() 方法

基线 广泛可用

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

HTMLInputElement.setCustomValidity() 方法为元素设置自定义有效性消息。

语法

js
setCustomValidity(message)

参数

message

用于有效性错误的消息。

返回值

无 (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("That's too high!");
  } else {
    input.setCustomValidity("");
  }

  input.reportValidity();
}

如果没有任何错误，务必将消息设置为空字符串。只要错误消息不为空，表单将无法通过验证，也不会提交。

规范

规范
HTML 标准
# dom-cva-setcustomvalidity

浏览器兼容性

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

另请参阅