HTML Academy · 课时

required、pattern、min、max 和 maxlength

Q: 「required、pattern、min、max 和 maxlength」这节课中我会学到什么？

为表单输入添加内置验证约束 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

为表单输入添加内置验证约束

required、pattern、min、max 和 maxlength 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

HTML5 表单验证

HTML5 添加了内置表单验证 — 无需 JavaScript：

浏览器会在提交前检查约束
原生错误消息会自动显示
可与 CSS 的 :valid / :invalid 伪类配合使用

required

required 属性会在字段为空时阻止提交：

<label for="email">Email (required)</label>
<input type="email" id="email" name="email" required>
<!-- Empty on submit → browser shows "Please fill in this field" -->
<!-- Also: field is :invalid until filled -->

pattern

pattern 属性根据正则表达式验证文本：

<label for="username">Username (letters and numbers only)</label>
<input
  type="text"
  id="username"
  name="username"
  pattern="[a-zA-Z0-9]{3,20}"
  title="3-20 letters and numbers"
>
<!-- pattern anchored at both ends automatically -->
<!-- title provides the error message hint -->

常见的 pattern 示例

适用于表单字段的实用正则表达式：

<!-- Phone: digits, spaces, hyphens -->
<input type="tel" pattern="[0-9 ()+-]{7,20}">

<!-- Postal code: US zip code -->
<input type="text" pattern="[0-9]{5}(-[0-9]{4})?">

<!-- Password: min 8 chars, one uppercase, one digit -->
<input type="password" pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}">

<!-- Twitter handle: -->
<input type="text" pattern="@?[A-Za-z0-9_]{1,15}">

min 和 max

限制数字、日期和范围输入：

<!-- Number range -->
<input type="number" name="qty" min="1" max="100">

<!-- Date range -->
<input type="date" name="checkin" min="2025-01-01" max="2025-12-31">

<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" step="5">

<!-- Time -->
<input type="time" name="meeting" min="09:00" max="17:00">

maxlength 和 minlength

控制文本输入长度：

<input type="text" name="username" minlength="3" maxlength="20">
<!-- minlength: minimum number of characters required -->
<!-- maxlength: maximum characters allowed (browser enforces hard stop) -->

<textarea name="bio" minlength="50" maxlength="500"></textarea>
<!-- Same attributes work on textarea -->

step

step 属性定义数字和范围输入的有效增量：

<input type="number" name="price" min="0" step="0.01">
<!-- Accepts decimal prices: 0.00, 0.01, 4.99, etc. -->

<input type="number" name="qty" min="0" step="5">
<!-- Only multiples of 5: 0, 5, 10, 15... -->

<input type="range" min="0" max="100" step="10">
<!-- Snaps to: 0, 10, 20, ..., 100 -->

CSS :valid 和 :invalid

根据字段的验证状态设置样式：

input:valid {
  border-color: #22c55e;   /* green when valid */
}

input:invalid {
  border-color: #ef4444;   /* red when invalid */
}

/* Avoid showing :invalid on page load (before user interaction): */
input:not(:placeholder-shown):invalid {
  border-color: #ef4444;
}
/* Only show invalid style after user has typed something */

使用 title 提供自定义错误消息

title 属性会在浏览器的验证错误消息中提供提示：

<input
  type="text"
  pattern="[A-Za-z]{2,3}"
  title="Enter a 2 or 3 letter country code (e.g. US, GB, DEU)"
  name="country-code"
>
<!-- Browser shows the title text alongside the default error message -->

组合使用多个约束

多个验证属性可以协同工作：

<input
  type="text"
  name="username"
  required
  minlength="3"
  maxlength="20"
  pattern="[a-z][a-z0-9_]*"
  title="Lowercase letters, numbers, underscores. Must start with a letter."
>
<!-- All constraints must pass for the field to be :valid -->

novalidate 和验证时机

验证默认在提交时触发。若要在每次输入事件时进行验证：

<input type="email" id="email">

<script>
const input = document.getElementById('email');
input.addEventListener('blur', () => {
  // Check validity on blur (when user leaves field):
  if (!input.validity.valid) {
    input.reportValidity();
  }
});
</script>

验证伪类总结

表单验证 CSS 伪类：

:valid — 约束验证通过
:invalid — 一个或多个约束验证失败
:required — 具有 required 属性
:optional — 不具有 required 属性
:in-range — 值在 min/max 范围内
:out-of-range — 值超出 min/max 范围

快速检查

哪个属性限制文本输入框中的最大字符数？

回顾：验证属性

HTML5 验证要点：

required — 字段必须填写
pattern — 根据正则表达式进行验证
min / max — 数字、日期或范围的值边界
maxlength / minlength — 字符数边界
step — 有效增量
使用 CSS :valid / :invalid 设置样式

常见问题解答

「required、pattern、min、max 和 maxlength」课时是免费的吗？

是的 — 「required、pattern、min、max 和 maxlength」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「required、pattern、min、max 和 maxlength」这节课中我会学到什么？

为表单输入添加内置验证约束你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「required、pattern、min、max 和 maxlength」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy