# 表单验证

URL: https://caijiao.org/html/05-forms/03-validation
Source: docs/html/05-forms/03-validation.md
Description: HTML 表单验证用于确保用户输入符合预期格式或要求，是提高数据准确性与安全性的第一道防线，常通过属性如 required、pattern、min、max 等实现。

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

## 必填字段

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

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

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

## 输入类型验证

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

```html
<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` 属性设置自定义格式：

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

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

## 输入长度限制

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

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

## 配合提示信息

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

## 示例表单



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