HTML5 表单大升级：原生验证让你少写几百行 JS 代码！

还在为表单验证写一大堆 if-else 和正则吗？HTML5 早就帮你准备好了"开箱即用"的验证方案。

一、为什么需要关注 HTML5 表单验证？

1. 监听 submit 事件
2. 逐个字段取值
3. 写正则校验邮箱、手机号
4. 判断必填项是否为空
5. 手动显示错误提示
6. 阻止表单提交

二、基础验证属性：零 JS 实现校验

1. required —— 必填项

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

2. type —— 内置格式校验

<!-- 邮箱：自动校验 xxx@xxx.xxx 格式 -->
<input type="email" name="email">

<!-- URL -->
<input type="url" name="homepage">

<!-- 数字：限制只能输入数字 -->
<input type="number" name="age" min="0" max="120">

<!-- 电话号码（移动端弹出数字键盘） -->
<input type="tel" name="phone">

<!-- 搜索框 -->
<input type="search" name="q">

💡 注意：type="email" 的校验规则因浏览器而异，生产环境建议配合 pattern 使用。

3. pattern —— 正则表达式校验

<!-- 手机号：中国大陆 11 位 -->
<input type="tel" name="phone" pattern="^1[3-9]\d{9}$" title="请输入有效的手机号">

<!-- 密码：至少 8 位，包含字母和数字 -->
<input type="password" name="password" pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" 
       title="密码至少 8 位，需包含字母和数字">

4. min / max / minlength / maxlength

<!-- 数字范围 -->
<input type="number" name="score" min="0" max="100">

<!-- 文本长度 -->
<input type="text" name="nickname" minlength="2" maxlength="20">

5. step —— 步长控制

<!-- 只能输入 0.5 的倍数 -->
<input type="number" name="rating" step="0.5" min="0" max="5">

三、完整示例：一个注册表单

<form id="registerForm">
  <div>
    <label>用户名 *</label>
    <input type="text" name="username" required minlength="3" maxlength="20">
  </div>

  <div>
    <label>邮箱 *</label>
    <input type="email" name="email" required>
  </div>

  <div>
    <label>手机号 *</label>
    <input type="tel" name="phone" required pattern="^1[3-9]\d{9}$" title="请输入 11 位手机号">
  </div>

  <div>
    <label>密码 *</label>
    <input type="password" name="password" required minlength="8">
  </div>

  <div>
    <label>年龄</label>
    <input type="number" name="age" min="18" max="120">
  </div>

  <div>
    <label>
      <input type="checkbox" name="agree" required>
      我已阅读并同意用户协议
    </label>
  </div>

  <button type="submit">注册</button>
</form>

四、Constraint Validation API：需要定制时的逃生舱

核心属性和方法

const input = document.querySelector('input[name="username"]');

// 属性
input.validity          // ValidityState 对象，包含各种验证状态
input.validationMessage // 浏览器生成的错误提示信息
input.valid             // 布尔值，当前是否通过验证

// 方法
input.checkValidity()   // 检查是否有效，返回布尔值
input.reportValidity()  // 检查并弹出浏览器默认提示气泡
input.setCustomValidity(message) // 设置自定义错误信息

ValidityState 对象

input.validity = {
  valueMissing: false,     // required 但未填
  typeMismatch: false,     // type 不匹配（如 email 格式错误）
  patternMismatch: false,  // pattern 不匹配
  tooLong: false,          // 超过 maxlength
  tooShort: false,         // 不足 minlength
  rangeUnderflow: false,   // 小于 min
  rangeOverflow: false,    // 大于 max
  stepMismatch: false,     // 不符合 step
  valid: true              // 全部通过
}

自定义验证示例

const password = document.querySelector('input[name="password"]');
const confirmPassword = document.querySelector('input[name="confirmPassword"]');

confirmPassword.addEventListener('input', () => {
  if (confirmPassword.value !== password.value) {
    confirmPassword.setCustomValidity('两次密码输入不一致');
  } else {
    confirmPassword.setCustomValidity(''); // 清空错误
  }
});

阻止默认提示，自定义 UI

const form = document.getElementById('registerForm');

form.addEventListener('submit', (e) => {
  if (!form.checkValidity()) {
    e.preventDefault(); // 阻止提交
    // 自定义错误展示逻辑
    showCustomErrors(form);
  }
});

function showCustomErrors(form) {
  const inputs = form.querySelectorAll('input');
  inputs.forEach(input => {
    if (!input.valid) {
      // 在输入框旁边显示自定义错误样式
      input.classList.add('invalid');
      const errorEl = input.parentElement.querySelector('.error-msg');
      if (errorEl) {
        errorEl.textContent = input.validationMessage;
      }
    }
  });
}

五、CSS 伪类：验证状态的样式控制

/* 输入有效时：绿色边框 */
input:valid {
  border-color: #4caf50;
}

/* 输入无效时：红色边框 */
input:invalid {
  border-color: #f44336;
}

/* 必填项标记 */
input:required {
  background-image: url('required-icon.svg');
}

/* 可选字段 */
input:optional {
  opacity: 0.9;
}

/* 范围匹配 */
input:in-range {
  border-color: #4caf50;
}
input:out-of-range {
  border-color: #ff9800;
}

⚠️ 注意：页面加载时 :invalid 就会匹配空输入框。建议配合 :not(:placeholder-shown) 或 JS 控制，避免一进来就满屏红色。

/* 更好的做法：用户交互后再显示错误 */
input:not(:placeholder-shown):invalid {
  border-color: #f44336;
}

六、:has() 选择器：更优雅的错误提示布局

/* 当表单内存在无效输入框时，改变提交按钮样式 */
form:has(input:invalid) button[type="submit"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 输入框容器根据验证状态显示不同图标 */
.field:has(input:invalid)::after {
  content: '✗';
  color: #f44336;
}
.field:has(input:valid)::after {
  content: '✓';
  color: #4caf50;
}

七、新 Form 元素：不止是 input

<datalist> —— 输入建议

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

<output> —— 实时计算结果

<form oninput="result.value = parseInt(a.value || 0) + parseInt(b.value || 0)">
  <input type="number" id="a" value="0">
  + <input type="number" id="b" value="0">
  = <output name="result">0</output>
</form>

<progress> / <meter> —— 进度和度量

<!-- 进度条 -->
<progress value="70" max="100">70%</progress>

<!-- 度量（有颜色区间） -->
<meter value="0.6" min="0" max="1" low="0.3" high="0.7" optimum="0.5">
  60%
</meter>

八、浏览器支持与降级策略

// 检测浏览器是否支持 Constraint Validation API
if (!('checkValidity' in document.createElement('input'))) {
  // 加载 polyfill 或回退到传统验证
  loadPolyfill();
}

九、最佳实践总结

1. 优先使用原生属性​ —— required、type、pattern 能覆盖 80% 的场景
2. pattern 配合 title​ —— 给用户明确的错误提示
3. 不要完全依赖前端验证​ —— 后端必须再次校验，前端验证只是 UX 优化
4. 自定义错误用 setCustomValidity('') 清空​ —— 否则表单永远无法提交
5. CSS 错误样式加交互条件​ —— 避免页面加载就显示红色
6. 复杂联动验证用 JS + API​ —— 原生属性覆盖不了的，用 setCustomValidity 补充

十、结语

少写代码 ≠ 功能缩水，而是用对了工具。