如果元素的价值没有有效性问题，则返回 true；否则返回 false。
这个牵强的例子演示了如何使一个按钮无效。
HTML
我们创建了一个只包含几个按钮的表单。
<form action="#" id="form" method="post">
<p>
<input type="submit" value="Submit" />
<button id="example" type="submit" value="fixed">THIS BUTTON</button>
</p>
<p>
<button type="button" id="report">reportValidity()</button>
</p>
</form>
<p id="log"></p>
CSS
我们添加了一些 CSS，包括按钮的 :valid 和 :invalid 样式。
input[type="submit"],
button {
background-color: #3333aa;
border: none;
font-size: 1.3rem;
padding: 5px 10px;
color: white;
}
button:invalid {
background-color: #aa3333;
}
button:valid {
background-color: #33aa33;
}
JavaScript
我们包含了一个函数来切换示例按钮的值、内容和验证消息。
const reportButton = document.querySelector("#report");
const exampleButton = document.querySelector("#example");
const output = document.querySelector("#log");
reportButton.addEventListener("click", () => {
const reportVal = exampleButton.reportValidity();
output.innerHTML = `reportValidity returned: ${reportVal} <br/> custom error: ${exampleButton.validationMessage}`;
});
exampleButton.addEventListener("invalid", () => {
console.log("Invalid event fired on exampleButton");
});
exampleButton.addEventListener("click", (e) => {
e.preventDefault();
if (exampleButton.value === "error") {
breakOrFixButton("fixed");
} else {
breakOrFixButton("error");
}
output.innerHTML = `validation message: ${exampleButton.validationMessage} <br/> custom error: ${exampleButton.validationMessage}`;
});
function breakOrFixButton() {
const state = toggleButton();
if (state === "error") {
exampleButton.setCustomValidity("This is a custom error message");
} else {
exampleButton.setCustomValidity("");
}
}
function toggleButton() {
if (exampleButton.value === "error") {
exampleButton.value = "fixed";
exampleButton.innerHTML = "No error";
} else {
exampleButton.value = "error";
exampleButton.innerHTML = "Custom error";
}
return exampleButton.value;
}
结果
该按钮默认是有效的。激活“THIS BUTTON”按钮来更改其值、内容并添加自定义错误消息。激活“reportValidity()”按钮会检查按钮的有效性，向用户报告自定义错误消息，并在按钮因消息未能通过约束验证时触发 invalid 事件。