异常教程

JavaScript 验证 API（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：验证的必要性与挑战

在 Web 开发中，表单验证是一个基础但至关重要的环节。无论是用户注册、订单提交还是数据收集，确保输入的合法性直接影响用户体验和系统安全性。对于编程初学者而言，手动编写验证逻辑可能显得复杂且容易出错；而中级开发者则可能面临代码冗余或维护困难的问题。

传统的验证方法通常依赖正则表达式、条件判断或第三方库，但这些方式存在代码分散、缺乏标准化的缺陷。随着浏览器技术的发展，JavaScript 验证 API 提供了一种更高效、更统一的解决方案。本文将从零开始讲解这一技术，帮助开发者轻松构建健壮的表单验证流程。

什么是 JavaScript 验证 API？

JavaScript 验证 API 是浏览器提供的原生接口，用于直接操作 HTML 表单元素的验证状态。它包括两部分：

  1. HTML5 内置的验证机制：通过属性（如 required、type="email"）实现基础验证。
  2. Constraint Validation API：提供 JavaScript 方法（如 checkValidity()）和属性（如 validity.valid）来控制验证逻辑。

比喻：将传统验证比作人工安检，而 API 则是自动化安检系统。前者需要逐个检查证件，后者通过流水线实现快速、标准化的判断。

传统验证方法的局限性

手动验证的痛点

// 手动验证邮箱格式的示例  
function validateEmail(email) {  
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;  
  return regex.test(email);  
}

虽然这种方法可行，但存在以下问题：

  • 代码分散：每个字段需要独立函数，维护成本高。
  • 反馈延迟：错误提示需手动绑定到 DOM 节点，用户体验差。
  • 浏览器兼容性：需处理不同浏览器的差异，例如 IE 对正则的支持。

第三方库的权衡

使用如 jQuery Validate 的库能简化流程，但引入额外依赖可能增加页面加载时间。此外，库的更新迭代也可能带来兼容风险。

JavaScript 验证 API 的核心功能

HTML5 内置属性

通过 HTML 属性即可实现基础验证：

<form>  
  <input type="email" required>  
  <input type="number" min="18" max="99">  
  <button type="submit">提交</button>  
</form>
  • required：强制字段非空。
  • type="email"：自动检测邮箱格式。
  • min/max：约束数字范围。

Constraint Validation API 的增强

通过 JavaScript 可进一步控制验证逻辑：

1. 检查表单有效性

const form = document.querySelector("form");  
form.addEventListener("submit", (e) => {  
  if (!form.checkValidity()) {  
    e.preventDefault(); // 阻止提交  
    form.reportValidity(); // 显示原生提示  
  }  
});
  • checkValidity()：返回布尔值，判断整个表单是否有效。
  • reportValidity()：触发浏览器原生的错误提示。

2. 检查单个字段的状态

const emailInput = document.querySelector("input[type='email']");  
console.log(emailInput.validity.valid); // true 或 false

validity 对象包含多个属性，例如：

  • valid：整体有效性。
  • typeMismatch：类型不匹配（如邮箱格式错误）。
  • valueMissing：必填字段为空。

关键 API 方法与属性详解

validity 对象的深度解析

// 假设用户输入 "test" 到邮箱字段  
emailInput.value = "test";  
console.log(emailInput.validity.typeMismatch); // true

通过 validity 可获取具体错误原因，从而定制化提示信息。

设置自定义验证消息

<input type="text" required  
  oninvalid="setCustomValidity('请输入至少 5 个字符')"  
  oninput="setCustomValidity('')">
  • oninvalid：当验证失败时设置自定义提示。
  • oninput：重置验证状态，避免输入中途错误提示残留。

实战案例：构建用户注册表单

场景需求

设计一个包含以下字段的表单：
| 字段名 | 验证规则 |
|-------------|----------------------------------|
| 用户名 | 必填，长度 3-20 字符 |
| 邮箱 | 必填，符合邮箱格式 |
| 年龄 | 必填，18-99 岁 |
| 密码 | 必填，包含数字和字母 |

HTML 结构

<form id="registerForm">  
  <input type="text" id="username" required minlength="3" maxlength="20">  
  <input type="email" id="email" required>  
  <input type="number" id="age" required min="18" max="99">  
  <input type="password" id="password" required>  
  <button type="submit">注册</button>  
</form>

JavaScript 实现

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

form.addEventListener("submit", (e) => {  
  e.preventDefault();  
  const password = document.getElementById("password").value;  

  // 自定义密码验证（必须包含数字和字母）  
  if (!/[a-zA-Z]/.test(password) || !/[0-9]/.test(password)) {  
    document.getElementById("password").setCustomValidity("密码需包含字母和数字");  
  } else {  
    document.getElementById("password").setCustomValidity("");  
  }  

  // 检查整体有效性  
  if (!form.checkValidity()) {  
    form.reportValidity();  
  } else {  
    alert("提交成功！");  
  }  
});

进阶技巧与最佳实践

1. 动态验证与异步校验

对于需要后端验证的场景（如检测邮箱是否已注册），可结合 async/await：

async function checkEmailExists(email) {  
  const response = await fetch(`/api/check-email?email=${email}`);  
  return await response.json();  
}  

// 在提交时执行异步验证  
form.addEventListener("submit", async (e) => {  
  e.preventDefault();  
  const email = document.getElementById("email").value;  
  if (await checkEmailExists(email)) {  
    document.getElementById("email").setCustomValidity("邮箱已存在");  
  }  
  // ...其他逻辑  
});

2. 可视化错误提示优化

通过 CSS 自定义提示样式：

input:invalid {  
  border: 2px solid red;  
}  

input:valid {  
  border: 2px solid green;  
}

3. 表单重置与状态管理

function resetForm() {  
  form.reset();  
  // 重置所有字段的验证状态  
  Array.from(form.elements).forEach(element => {  
    element.setCustomValidity("");  
  });  
}

常见问题与解决方案

Q1：如何同时使用多个验证规则？

A：通过组合 HTML 属性和 JavaScript 验证。例如，邮箱字段需同时满足格式和唯一性：

<input type="email" required>  

// 在提交时补充唯一性验证

Q2：移动端浏览器显示不同样式怎么办？

A：使用 CSS 覆盖默认样式，并测试不同设备的表现。

Q3：如何避免重复代码？

A：将验证逻辑封装为函数或类，例如：

class FormValidator {  
  constructor(form) {  
    this.form = form;  
    this.init();  
  }  

  init() {  
    this.form.addEventListener("submit", this.handleSubmit.bind(this));  
  }  

  handleSubmit(e) {  
    // 验证逻辑  
  }  
}  

new FormValidator(document.getElementById("registerForm"));

结论：拥抱现代验证技术

JavaScript 验证 API 通过标准化的接口和浏览器内置功能，显著降低了表单验证的复杂度。开发者无需再编写冗长的正则表达式或手动绑定事件，而是可以专注于业务逻辑的实现。

对于初学者，建议从 HTML5 的基础属性开始，逐步学习 Constraint Validation API 的高级功能；中级开发者则可通过自定义验证和异步交互，构建更复杂的验证场景。随着技术的不断演进，掌握这一工具将成为提升开发效率的关键一步。

下一步行动：尝试将现有项目中的手动验证逻辑迁移到 JavaScript 验证 API，体验代码简洁性与可维护性的提升。

最新发布

查看更多文章