推荐使用 Ajv（v8+）在前端验证 JSON 数据是否符合 Schema，通过 CDN 或 npm 引入后创建实例、编译 Schema 为校验函数，调用返回布尔值并获取详细错误；支持 TypeScript 自动生成 Schema 保障类型一致性。
在前端用 JavaScript 验证 JSON 数据是否符合 Schema 结构，核心是引入一个轻量、可靠、支持浏览器环境的 JSON Schema 验证器，比如 Ajv（最主流）或其封装库（如 json-schema-validator）。不依赖后端、不手写 if-else，靠声明式规则自动校验。
选一个验证库并初始化
推荐使用 Ajv（v8+），它性能高、生态成熟、支持 Draft 2020-12，且天然适配浏览器：
- 通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/ajv@8/dist/ajv.min.js"></script> - 或用 npm：
npm install ajv，再在代码中import Ajv from 'ajv' - 创建实例：
const ajv = new Ajv({ allErrors: true })（allErrors: true可一次性返回所有错误）
定义 Schema 并编译成校验函数
Schema 是一个普通 JS 对象，描述你期望的数据结构。例如校验用户信息：
const userSchema = {
type: 'object',
properties: {
name: { type: 'string', minLength: 2 },
age: { type: 'integer', minimum: 0, maximum: 150 },
email: { type: 'string', format: 'email' }
},
required: ['name', 'age']
}
用 Ajv 编译为可复用的校验函数：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“Java免费学习笔记（深入）”；
const validateUser = ajv.compile(userSchema)- 之后每次调用
validateUser(data)就会返回true或false
执行校验并处理结果
校验后通过 validateUser.errors 获取详细错误（含字段路径、原因、约束类型）：
- 若
validateUser(data) === false，遍历validateUser.errors输出提示，例如："age must be integer"或"email must match format 'email'" - 可配合
ajv-i18n插件返回中文错误（如ajv.addKeyword('errorMessage')+ 中文文案） - 常见场景：AJAX 响应后立即校验
res.data，不合法则提前报错、不渲染、不触发后续逻辑
进阶建议：从 TypeScript 自动生成 Schema
避免手动写 Schema 出错或与接口脱节：
- 用
typescript-json-schema工具，把interface User { name: string; age: number }自动转成对应 JSON Schema - 构建时生成 Schema 文件，前端加载后编译，确保前后端类型契约一致
- 配合 Swagger/OpenAPI 的
components.schemas也能导出 Schema 复用
