约束验证 API
使用内置的有效性检查功能。
约束验证 API 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
内置验证
HTML 表单字段支持 required、min、max、pattern 和 type="email" 等属性。约束验证 API 让 JavaScript 能够检查并控制这种内置验证。
checkValidity
checkValidity 返回布尔值，并在每个验证失败的控件上触发 invalid 事件，但不会显示浏览器的气泡提示。
const email = document.querySelector("#email");
console.log(email.checkValidity());reportValidity
reportValidity 类似于 checkValidity，但还会为无效字段显示浏览器的验证消息界面。
if (!form.reportValidity()) {
console.log("show built-in errors");
}validity 对象
每个控件都有一个 validity 对象，其中包含描述具体问题的布尔标志。
console.log(email.validity.valueMissing); // empty required
console.log(email.validity.typeMismatch); // wrong format
console.log(email.validity.tooShort);validity.valid
只有字段通过所有约束时，validity.valid 才为 true；它概括了其他标志的结果。
if (email.validity.valid) {
console.log("ok");
}validationMessage
validationMessage 保存浏览器针对当前错误将要显示的本地化消息。
console.log(email.validationMessage);setCustomValidity
setCustomValidity 会使用您提供的消息将字段标记为无效。非空字符串表示无效，空字符串则会清除该状态。
function checkMatch() {
if (pass.value !== confirm.value) {
confirm.setCustomValidity("Passwords must match");
} else {
confirm.setCustomValidity("");
}
}始终清除自定义错误
如果设置了自定义消息，字段有效后必须使用空字符串将其清除，否则该字段将永远保持无效。
confirm.addEventListener("input", () => {
confirm.setCustomValidity("");
checkMatch();
});invalid 事件
监听 invalid 事件，即可在验证失败时运行自定义逻辑，例如为字段添加样式。
email.addEventListener("invalid", () => {
email.classList.add("error");
});禁用原生气泡提示
为表单添加 novalidate，即可抑制原生弹窗，同时继续使用 API 来显示您自己的消息。
form.setAttribute("novalidate", "");
form.addEventListener("submit", (e) => {
if (!form.checkValidity()) e.preventDefault();
});使用 :valid 和 :invalid 设置样式
CSS 伪类 :valid 和 :invalid 会根据字段的验证状态自动设置样式。
快速检查
自定义验证规则。
回顾
约束验证 API 与 HTML 约束属性配合使用。使用 checkValidity/reportValidity 来测试错误（并可选择是否显示错误），检查 validity 标志和 validationMessage，并使用 setCustomValidity 添加自定义规则（使用空字符串清除）。invalid 事件以及 :valid/:invalid CSS 有助于设置样式。
常见问题解答
「约束验证 API」课时是免费的吗？
是的 — 「约束验证 API」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「约束验证 API」这节课中我会学到什么？
使用内置的有效性检查功能。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「约束验证 API」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。