HTMLObjectElement: setCustomValidity() 方法
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 |
浏览器兼容性
加载中…