html5表单验证规则

HTML5 提供了一些新的表单验证规则，可以通过设置 input 元素的 type 属性或添加相应的属性来使用。以下是一些常见的 HTML5 表单验证规则：

1. required 规则：表示该字段为必填项，如果该字段为空则无法提交表单。

2. email 规则：表示该字段必须是一个有效的电子邮件地址。

3. url 规则：表示该字段必须是一个有效的 URL 地址。

4. pattern 规则：表示该字段必须匹配指定的正则表达式。

5. min 和 max 规则：表示该字段的值必须在指定的最小值和最大值之间，适用于数字类型的表单项。

6. minlength 和 maxlength 规则：表示该字段的长度必须在指定的最小长度和最大长度之间，适用于文本类型的表单项。

7. number 规则：表示该字段必须是一个数字类型的值。

8. tel 规则：表示该字段必须是一个有效的电话号码。

9. date、time、datetime、week、month 规则：表示该字段必须是一个有效的日期或时间类型的值。

例如：

<form>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required><br>
  
  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" min="18" max="60"><br>

  <label for="phone">电话：</label>
  <input type="tel" id="phone" name="phone" pattern="^\d{11}$"><br>

  <button type="submit">提交</button>
</form>

在这个例子中，邮箱输入框设置了 required 规则，表示该字段为必填项；年龄输入框设置了 min 和 max 规则，表示年龄必须在 18 到 60 之间；电话输入框设置了 pattern 规则，表示该字段必须是一个 11 位数字的电话号码。