HTML表单验证HTML5属性

HTML5新增输入类型自带验证功能，简化表单验证开发。

email邮箱验证

基本用法

<input type="email" placeholder="请输入邮箱">

• 自动验证邮箱格式
• 移动端显示邮箱键盘
• 支持multiple属性接收多邮箱

多邮箱输入

<input type="email" multiple placeholder="多个邮箱用逗号分隔">

配合required

<input type="email" required placeholder="必填邮箱">

type="email"验证标准格式，但不严格，复杂场景建议配合pattern。

url网址验证

基本用法

<input type="url" placeholder="请输入网址">

• 验证URL格式（必须以http://或https://开头）
• 移动端显示URL键盘

严格验证

<input type="url" pattern="^https://[^\s]+$"
       placeholder="仅允许HTTPS网址">

使用场景

<form>
  <label>个人网站：<input type="url" name="website"></label>
  <label>作品链接：<input type="url" name="portfolio"></label>
</form>

tel电话验证

基本用法

<input type="tel" placeholder="请输入电话">

• 移动端显示数字键盘
• HTML5无内置格式验证（各国格式差异）

配合pattern验证

<!-- 中国手机号 -->
<input type="tel" pattern="^1[3-9]\d{9}$"
       placeholder="11位手机号" maxlength="11">

<!-- 固定电话 -->
<input type="tel" pattern="^\d{3,4}-\d{7,8}$"
       placeholder="区号-号码">

国际化处理

<input type="tel" pattern="^\+?\d{10,15}$"
       placeholder="国际号码（如+86xxx）">

number数字验证

基本用法

<input type="number" placeholder="请输入数字">

• 只允许数字输入
• 自动过滤非数字字符
• 显示数字增减按钮

范围限制

<!-- 年龄 -->
<input type="number" min="0" max="150" step="1" placeholder="年龄">

<!-- 价格 -->
<input type="number" min="0" step="0.01" placeholder="金额">

<!-- 负数范围 -->
<input type="number" min="-100" max="100" placeholder="范围-100到100">

验证状态

const numInput = document.querySelector('input[type="number"]');

numInput.validity.rangeUnderflow; // 小于min
numInput.validity.rangeOverflow;  // 大于max
numInput.validity.stepMismatch;   // 不符合step

step默认为1，设置step="any"允许任意精度。

date日期验证

基本用法

<input type="date" placeholder="选择日期">

• 显示日期选择器
• 格式为YYYY-MM-DD

日期范围

<!-- 出生日期 -->
<input type="date" min="1900-01-01" max="2024-12-31">

<!-- 预约日期 -->
<input type="date" min="2024-01-01" max="2024-03-31">

JavaScript处理

const dateInput = document.querySelector('input[type="date"]');
dateInput.value; // "2024-01-15" (字符串)

// 获取Date对象
const date = new Date(dateInput.value);

// 设置值
dateInput.value = new Date().toISOString().split('T')[0];

其他日期时间类型

time时间

<input type="time" min="09:00" max="18:00" step="1800">
<!-- step=1800表示30分钟间隔 -->

datetime-local本地日期时间

<input type="datetime-local">
<!-- 格式：YYYY-MM-DDTHH:MM -->

month月份

<input type="month">
<!-- 格式：YYYY-MM -->

week周

<input type="week">
<!-- 格式：YYYY-Wnn (如2024-W03) -->

类型对比表

自定义验证提示

默认提示覆盖

<input type="email" required
       oninvalid="this.setCustomValidity('请输入正确的邮箱地址')"
       oninput="this.setCustomValidity('')">

多语言提示

<input type="number" min="0" max="100"
       oninvalid="if(this.validity.rangeUnderflow)
                    this.setCustomValidity('数值不能小于0');
                  else if(this.validity.rangeOverflow)
                    this.setCustomValidity('数值不能大于100')"
       oninput="this.setCustomValidity('')">

类型验证与pattern配合

<!-- email + pattern双重验证 -->
<input type="email" pattern="^[a-zA-Z0-9]+@company\.com$"
       placeholder="仅限公司邮箱">

<!-- url + pattern限制域名 -->
<input type="url" pattern="^https://example\.com/.*$"
       placeholder="仅限指定域名">

<!-- number + pattern限制整数 -->
<input type="number" pattern="^\d+$"
       placeholder="仅限整数">

要点总结

• type="email"自动验证邮箱格式
• type="url"验证URL格式，需http/https前缀
• type="tel"无内置验证，需配合pattern
• type="number"支持min/max/step范围验证
• type="date"提供日期选择器，格式标准化
• 可通过setCustomValidity自定义验证提示