HTML type属性验证类型

HTML5为input新增多种语义化类型，浏览器自动验证对应格式，提供更友好的输入体验和原生验证支持。

常用验证类型

email类型

<form>
  <label>邮箱：</label>
  <input type="email" name="email" required>
  <!-- 验证规则：xxx@xxx.xxx 格式 -->
  <button type="submit">提交</button>
</form>

移动端会显示专用的邮箱键盘（带@符号）。

<!-- 多邮箱输入 -->
<input type="email" name="emails" multiple>
<!-- 允许输入多个邮箱，用逗号分隔 -->

url类型

<form>
  <label>个人主页：</label>
  <input type="url" name="website" required
         placeholder="https://example.com">
  <button type="submit">提交</button>
</form>

验证规则：必须以http://或https://开头，后跟域名。

<!-- 示例 -->
<input type="url" value="https://www.example.com">  <!-- 有效 -->
<input type="url" value="www.example.com">          <!-- 无效 -->
<input type="url" value="http://localhost">         <!-- 有效 -->

tel类型

<form>
  <label>手机号：</label>
  <input type="tel" name="phone"
         pattern="^1[3-9]\d{9}$"
         placeholder="请输入11位手机号">
  <button type="submit">提交</button>
</form>

tel类型本身无内置验证规则，但移动端会显示数字键盘，需配合pattern使用。

number类型

<form>
  <label>数量：</label>
  <input type="number" name="quantity"
         min="1" max="100" step="1" value="1">
  <button type="submit">提交</button>
</form>

number属性说明

<!-- 小数输入 -->
<input type="number" step="0.01" placeholder="精确到两位小数">

<!-- 百分比输入 -->
<input type="number" min="0" max="100" step="5">

date/time类型

<form>
  <label>出生日期：</label>
  <input type="date" name="birthday"
         min="1900-01-01" max="2026-12-31">
  <br><br>

  <label>预约时间：</label>
  <input type="time" name="appointment"
         min="09:00" max="18:00">
  <br><br>

  <label>会议时间：</label>
  <input type="datetime-local" name="meeting">
  <br><br>

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

JavaScript验证检测

<form id="myForm">
  <label>邮箱：</label>
  <input type="email" id="emailInput" required>
  <span id="emailError"></span>
  <br><br>

  <label>网址：</label>
  <input type="url" id="urlInput" required>
  <span id="urlError"></span>
  <br><br>

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

<script>
  const emailInput = document.getElementById('emailInput');
  const urlInput = document.getElementById('urlInput');

  emailInput.addEventListener('input', () => {
    if (emailInput.validity.typeMismatch) {
      document.getElementById('emailError').textContent = '请输入有效的邮箱地址';
    } else {
      document.getElementById('emailError').textContent = '';
    }
  });

  urlInput.addEventListener('input', () => {
    if (urlInput.validity.typeMismatch) {
      document.getElementById('urlError').textContent = '请输入有效的网址（以http://或https://开头）';
    } else {
      document.getElementById('urlError').textContent = '';
    }
  });
</script>

CSS样式配合

<style>
  input:valid {
    border-color: #27ae60;
  }

  input:invalid:not(:placeholder-shown) {
    border-color: #e74c3c;
  }
</style>

<form>
  <input type="email" required placeholder="请输入邮箱">
  <input type="url" required placeholder="请输入网址">
  <button type="submit">提交</button>
</form>

类型对比表

<form>
  <fieldset>
    <legend>邮箱类型对比</legend>
    <label>text类型：</label>
    <input type="text" name="email1">
    <br>
    <label>email类型：</label>
    <input type="email" name="email2">
    <!-- email类型有内置验证，移动端有专用键盘 -->
  </fieldset>
</form>

注意：不同浏览器对类型的验证规则可能略有差异，建议在后端做二次验证。email类型允许不包含TLD的本地邮箱（如user@localhost）。

要点总结

1. email类型自动验证邮箱格式，支持multiple属性输入多个
2. url类型要求以http://或https://开头
3. tel类型无内置验证，需配合pattern使用
4. number类型支持min/max/step属性验证范围
5. date/time类型提供日期时间选择器和范围验证