JavaScript基础教程（四十三）验证 API：告别笨重验证！新一代JavaScript验证API实战指南-优快云博客

传统的表单验证往往需要开发者编写大量自定义JavaScript代码，而现代浏览器提供的Constraint Validation API正在改变这一现状。这个原生API不仅减少了对外部库的依赖，还提供了更强大的验证能力和更好的用户体验。

什么是Constraint Validation API？

Constraint Validation API是一组浏览器原生提供的接口和方法，允许开发者对表单字段进行有效性验证。它包含了属性、方法和事件，共同构成了完整的客户端验证解决方案。

核心特性解析

1. 内置验证属性

required：字段是否为必填
pattern：值是否匹配正则表达式
min/max：数值范围限制
minLength/maxLength：长度限制

2. 关键方法

checkValidity()：检查元素有效性
reportValidity()：显示验证结果
setCustomValidity()：设置自定义错误信息

3. 有效性属性

validity：返回ValidityState对象
validationMessage：获取错误信息

实战示例：完整表单验证

<form id="userForm">
  <label>用户名: 
    <input type="text" id="username" required minlength="3">
  </label>
  <label>邮箱:
    <input type="email" id="email" required>
  </label>
  <label>年龄:
    <input type="number" id="age" min="18" max="100">
  </label>
  <button type="submit">提交</button>
</form>

<script>
  const form = document.getElementById('userForm');
  
  // 自定义验证
  const username = document.getElementById('username');
  username.addEventListener('input', () => {
    if (username.validity.tooShort) {
      username.setCustomValidity('用户名至少需要3个字符');
    } else {
      username.setCustomValidity('');
    }
  });
  
  // 表单提交验证
  form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();
      form.reportValidity();
    }
  });
  
  // 实时验证反馈
  form.addEventListener('input', (event) => {
    const input = event.target;
    if (input.validity.valid) {
      input.style.borderColor = 'green';
    } else {
      input.style.borderColor = 'red';
    }
  });
</script>

高级用法：自定义复杂验证

// 密码强度验证
const password = document.getElementById('password');
password.addEventListener('input', () => {
  const hasUpperCase = /[A-Z]/.test(password.value);
  const hasNumber = /\d/.test(password.value);
  
  if (!hasUpperCase || !hasNumber) {
    password.setCustomValidity('密码必须包含大写字母和数字');
  } else {
    password.setCustomValidity('');
  }
});

// 异步验证用户名是否可用
const username = document.getElementById('username');
username.addEventListener('blur', async () => {
  const response = await fetch(`/check-username?username=${username.value}`);
  const isAvailable = await response.json();
  
  if (!isAvailable) {
    username.setCustomValidity('用户名已被占用');
    username.reportValidity();
  }
});

与传统验证方式的对比

特性	传统验证	Constraint Validation API
代码量	多	少
可访问性	需要额外处理	原生支持
浏览器兼容性	一致	需要polyfill支持老浏览器
自定义能力	完全控制	需要适配API约束