表单验证

表单验证是确保用户输入合法、完整的重要机制，HTML5 提供了丰富的内建验证功能，无需 JavaScript 即可实现基础校验。

必填字段

使用 required 属性可以强制用户填写某项内容：

<input type="text" name="username" required />

如果用户未填写，将无法提交表单。

输入类型验证

不同的 type 值会自动触发对应格式验证：

<input type="email" name="email" required />
<input type="url" name="homepage" />
<input type="number" name="age" min="1" max="100" />

上例中：

• type="email" 要求符合邮箱格式
• type="url" 要求是合法网址
• min 和 max 限制数值范围

正则表达式验证

使用 pattern 属性设置自定义格式：

<input
  type="text"
  name="zipcode"
  pattern="\d{6}"
  title="请输入6位数字的邮政编码"
/>

此示例要求输入 6 位数字，否则将提示用户。

输入长度限制

可通过 minlength 和 maxlength 限制字符长度：

<input type="text" name="nickname" minlength="2" maxlength="10" />

配合提示信息

可用 title 属性提供错误提示说明，或使用 <label> 与 <span> 提示用户输入要求。

示例表单

通过这些 HTML 验证机制，可以在不依赖脚本的情况下实现用户输入初步校验，提高用户体验并减少无效提交。