表单验证属性
应用 required、minlength、maxlength、pattern、min、max 和 step 属性，并使用 :valid 和 :invalid 伪类设置验证状态样式。
表单验证属性 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
浏览器原生验证
HTML5 通过属性提供内置表单验证。提交表单时，浏览器会验证每个字段。如果验证失败，浏览器会显示原生错误提示框并阻止提交，基本情况下无需使用 JavaScript。
required
为输入框、选择框或 textarea 添加 required 会使其成为必填项。提交表单时，如果字段为空，浏览器会显示错误。
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength 和 maxlength
minlength 强制要求最少字符数。maxlength 会阻止输入超过最大长度。将二者结合使用，可以强制执行密码复杂度要求或限制评论长度。
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>用于数值输入的 min、max 和 step
min 和 max 为数字和日期输入设置有效范围。step 设置递增幅度，适用于范围值（例如 5%）、小数精度和仅日期输入。
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — 正则表达式验证
pattern 接受 JavaScript 正则表达式。输入内容必须匹配该模式，表单才能提交。请包含 title，以便在浏览器的错误提示框中说明预期格式。
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — 禁用原生验证
将 novalidate 添加到 <form> 元素，可以禁用所有浏览器原生验证。当您实现自定义 JavaScript 验证时，请这样做，以便用户获得一致的体验。
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>在 JavaScript 中检查有效性
约束验证接口让您可以通过编程方式检查有效性：input.validity（ValidityState 对象）、input.checkValidity()（返回布尔值）、input.setCustomValidity(message)（设置自定义错误）。
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
调用 setCustomValidity(message) 并传入非空字符串，可使用自定义消息将输入标记为无效。传入空字符串可清除错误。它适用于需要服务器验证的字段，例如 username 的唯一性。
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}有效与无效伪类
使用 CSS 伪类设置有效和无效输入的样式。请注意：在用户与输入交互之前，输入就可能处于无效状态。请使用 :user-invalid（现代浏览器支持），或先通过 JavaScript 添加“已交互”类。
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }使用 reportValidity 显示自定义错误消息
form.reportValidity() 会在所有字段上触发浏览器的原生验证界面。在设置自定义有效性消息后使用它，可以立即向用户显示这些消息，而不必等待提交事件。
易访问的错误显示模式
请按以下方式显示内联错误：1）在输入上添加 aria-invalid="true"；2）显示一个通过 aria-describedby 与输入关联的错误段落；3）将焦点移至第一个无效字段。这样可以服务所有用户，包括使用屏幕阅读器的用户。
快速检查
哪个属性会将文本输入限制为最多 280 个字符？
回顾：表单验证属性
必填、最小长度/最大长度、最小值/最大值/步长、模式——这些都可以免费提供浏览器原生验证。实现自定义 JS 验证时，请使用禁用原生验证的设置。约束验证接口让 JavaScript 可以访问有效性状态。用户交互后，请使用 :user-invalid 设置错误样式。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 41
- 课程
- 163
常见问题解答
「表单验证属性」课时是免费的吗？
是的 — 「表单验证属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「表单验证属性」这节课中我会学到什么？
应用 required、minlength、maxlength、pattern、min、max 和 step 属性，并使用 :valid 和 :invalid 伪类设置验证状态样式。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「表单验证属性」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。