HTML 教程 / 表单验证：必填项、文本长度与数值范围

HTML内置的表单验证可以在提交前检查缺失值、文本长度、数字范围以及特定输入格式。required、minlength和max 等属性帮助浏览器引导用户。但它们并不能替代服务器端验证。

要求一个值并限制其长度

创建 validation.html，使用 HTML 基本文档结构，并设置 lang="zh-CN" 和 meta charset="utf-8"。每次只把一个表单示例放入 body，保存为 UTF-8 后在浏览器中打开。修改代码后保存并刷新页面，再比较结果。

<form method="get">
  <label for="nickname">昵称（2到20个字符）</label>
  <input id="nickname" name="nickname" type="text"
         required minlength="2" maxlength="20">
  <button type="submit">检查</button>
</form>

尝试提交一个空字段，然后输入一个字符，再输入两个字符。required 检查是否存在值，而 minlength 检查用户输入文本的长度；两者之间没有包含关系。浏览器显示的具体信息因浏览器、操作系统和语言而异。在用户提交之前告知他们规则，而不仅仅依赖错误提示。长度限制在通过脚本填充值时可能表现不同，因此如果您的表单使用了这些方法，请单独测试编程输入。

maxlength="20" 通常阻止用户输入超过其限制的内容。HTML 以 Unicode 编码 UTF-16 的编码单元来衡量此限制，这并不总是等于可见字符的数量——例如某些表情符号。如果您允许此类字符，请结合服务器长度规则测试实际输入。参见参考 MDN maxlength。

检查一个范围或一个基本格式

<form method="get">
  <label for="people">参与者（1–10）</label>
  <input id="people" name="people" type="number"
         min="1" max="10" step="1" required>

  <label for="email">电子邮件地址</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">检查</button>
</form>

min 和 max 定义了范围；step 定义允许的增量值。手动输入 0、11 和 2.5，并将其与增量按钮进行比较。小数分隔符取决于浏览器的区域设置；通常可输入 2.5，某些设置也可能接受逗号形式的小数。输入框中显示一个值并不意味着它可以有效提交。type="email" 检查地址的基本格式，而不是邮箱是否实际存在。应按数据含义选择输入类型，具体可参阅选择电子邮件、数字、日期与选项输入类型。

这是一个 GET 表单，会发送到当前 URL 以进行练习。请使用测试值如 name@example.com，而不要使用真实的个人地址。一旦这些值通过浏览器验证，您就可以在 URL 的查询字符串中检查 people 和 email。本示例不包含接收或存储数据的服务器。

提供有助于故障排除的提示

不要仅仅通过颜色来标记错误。“请输入一个1到10的整数”比“无效输入”提供了更多信息给用户。当您创建自定义消息时，将每条消息与相应的控件关联，并确保用户可以通过键盘返回该控件。属性novalidate在form上会在提交时忽略内置的交互式验证；不要仅仅为了掩盖问题而添加它。让填写条件保持可见，并按为表单字段添加提示与说明中的方法关联相应控件。

一个人可以通过开发者工具或直接请求绕过浏览器检查。始终在服务器端验证重要数据，尤其是用于账户、付款或已保存条目的值。浏览器端的检查可以帮助用户纠正错误；服务器端的检查保护应用程序。请查阅MDN关于验证限制的指南。

在添加自定义错误界面之前，还应应用键盘使用、焦点和名称的无障碍性检查。

将边界值与预期的验证错误进行比较

参与者字段使用 min="1" max="10" step="1" required。输入每个值并尝试提交，同时保持格式正确的测试电子邮件，以确保其他字段的错误不会影响结果。

内置错误的具体表述各有不同。该表区分失败的约束，而不是提供一条消息。即使数值 2 有效，只要另一个字段仍未通过验证，整个表单就仍然无效。

内置提示遵循 HTML 限制。自定义错误界面必须将消息与其控件关联，并管理状态更改和焦点。这需要额外的实现和测试；单独使用 aria-describedby 并不会创建验证。

自行测试规则

1. 每次只留空一个必填字段，然后尝试提交表单。
2. 尝试输入稍微超出和在每个指定范围内的值。
3. 仅使用键盘访问字段、读取错误、进行更正并重新提交。