约束验证 API
使用 JavaScript 读取有效性状态并检查约束
约束验证 API 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
无需 JavaScript 的验证
HTML5 通过以下属性提供了内置表单验证：required、type="email"、type="number"、min、max、pattern、minlength、maxlength。浏览器会在提交时自动进行验证并显示错误消息，无需 JS。
<input type="email" name="email" required>
<input type="number" name="age" min="18" max="120" required>
<input type="text" name="phone" pattern="\d{10}" required>CSS 验证选择器
:invalid 会匹配未通过验证的输入控件；:valid 会匹配通过验证的输入控件。现代浏览器中的 :user-invalid 只会在用户进行交互后匹配，从而避免初始表单出现红色边框。使用这些伪类设置错误样式。
input:user-invalid {
border-color: red;
}
input:user-invalid + .error {
display: block;
}ValidityState 对象
每个表单控件都提供一个有效性属性——一个 ValidityState 对象，其中包含布尔标志：valid、valueMissing、typeMismatch、patternMismatch、rangeUnderflow、tooShort 等。检查这些标志，以决定要显示哪条错误消息。
const input = form.querySelector("input[type=email]");
if (input.validity.typeMismatch) {
showError(input, "Please enter a valid email address");
}checkValidity 方法
input.checkValidity() 会在值满足所有约束时返回 true，否则返回 false。form.checkValidity() 会检查整个表单。在执行 AJAX 操作之前，或允许用户进入分步流程的下一步之前进行程序化检查时，这些方法非常有用。
reportValidity 方法
input.reportValidity() 的行为类似于 checkValidity，但还会触发浏览器内置的提示框，并将焦点置于第一个无效字段。希望免费使用原生界面时可以使用它；希望完全自定义错误显示时则使用 checkValidity。
自定义内置消息
浏览器的默认消息（“请填写此字段”）可能与您的语气或语言不一致。可以使用 input.setCustomValidity("Enter a valid coupon code") 进行覆盖。输入控件会变为无效，直到使用 setCustomValidity("") 清除该消息。
禁用浏览器验证界面
在表单上添加 novalidate，即可禁止浏览器执行默认验证行为。实现完全自定义的错误显示时很有用——无论表单是否通过验证，它仍然会提交，因此请在提交前进行程序化检查。
监听无效事件
每个控件都会在验证失败时触发 invalid 事件。监听此事件可以禁止默认提示框并显示自定义消息：input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); })。
使用正则表达式进行模式验证
pattern 属性包含一个 JavaScript 正则表达式，值必须完全匹配该表达式（无需使用 ^ 和 $ 锚点，因为它们是隐式的）。结合 title 属性描述预期格式，以便用户了解要求。
仍然需要服务端验证
HTML 验证是为用户提供便利；任何人编辑 DOM 后都可以绕过它。请始终在服务端重新验证。HTML 约束用于改善用户体验（即时反馈、减少往返请求），而不是用于保证安全。
组合多个约束
多个约束会叠加：<input type="number" min="18" max="120" required step="1"> 必须有值、必须是整数，并且介于 18 和 120 之间。浏览器会通过 ValidityState 标志公开具体失败的约束，因此您可以显示正确的消息。
知识检查
用户交互后无效的 CSS 伪类与无效 CSS 伪类有何不同？
总结
原生验证属性（必填、类型、模式、最小值和最大值）以及 ValidityState 接口，可以在默认无需 JS 的情况下提供强大的客户端验证。CSS 的用户交互后无效伪类会在用户交互后设置错误样式。checkValidity/reportValidity 用于执行程序化检查。setCustomValidity 可以覆盖默认消息。请始终在服务端重新验证。
常见问题解答
「约束验证 API」课时是免费的吗？
是的 — 「约束验证 API」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「约束验证 API」这节课中我会学到什么？
使用 JavaScript 读取有效性状态并检查约束 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「约束验证 API」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。