vanilla-jsonschema-form + ajv 是最可行路径，因其不依赖框架、不污染 dom、校验逻辑可复用；核心在于用 ajv 构建独立校验层，全量校验、编译 schema、精准映射错误路径，并手动桥接 schema 与 html 编辑器。
直接用 vanilla-jsonschema-form + ajv 组合是最可行的路径，不依赖框架、不污染 DOM、校验逻辑可复用——自己从零解析 Schema 并映射到 HTML 校验规则，90% 的坑都集中在字段类型误判和错误定位错位上。
为什么不能只靠 HTML5 表单原生验证
HTML5 原生 required、pattern、minlength 等属性只覆盖极小部分 JSON Schema 语义。比如 "type": "integer" 在 Schema 中要求整数，但 <input type="number"> 仍允许输入 3.14 或空字符串；"enum" 列表无法用 <select></select> 自动同步 disabled 状态；"oneOf" 或嵌套 "properties" 更是完全无对应 HTML 原生能力。
常见错误现象：
- 用户填了
"age": "25"（字符串），表单却通过校验，后端JSON.parse()后类型不匹配 -
"dependencies"规则被忽略，导致隐藏字段未校验却提交成功 - 错误提示只显示“Invalid”，不指向具体字段路径（如
#/user/email）
用 ajv 构建独立校验层，绕过 UI 框架绑定
关键不是“把 Schema 渲染成表单”，而是“让表单数据流经 Schema 验证器”。ajv 不关心 DOM，只认 JavaScript 对象 —— 这正是解耦的核心。
实操建议：
- 不要在
onchange里对每个字段单独校验，改用ajv.validate(schema, formData)全量校验，否则"if"/"then"等交叉规则永远漏检 - 校验前先用
ajv.compile(schema)编译一次，避免每次提交都重复解析 Schema（尤其含"definitions"的大 Schema） - 错误对象里的
.errors数组含instancePath字段（如"/user/phone"），别手动拼 DOM ID，用它直接映射到对应<input name="user.phone">元素 - 对
"format": "email"这类规则，ajv默认不启用，需显式调用ajv.addFormat("email", ...)，否则形同虚设
如何让 HTML 编辑器实时反馈 Schema 错误
编辑器本身（如 Monaco、CodeMirror）只负责文本，真正校验必须由 JS 主动触发：监听 blur 或防抖后的 input，提取当前内容 → JSON.parse() → 传给 ajv.validate()。
容易踩的坑：
-
JSON.parse()失败时，ajv不会运行，但你得自己捕获SyntaxError并标记整个编辑区为“非法 JSON”，不能静默吞掉 - 用户输入
{"name": "张三",}（末尾逗号），JSON.parse()直接抛错，此时 Schema 校验根本没机会执行 —— 必须分两层：先语法合法，再语义合法 - 错误定位要精确到字符偏移（
error?.position），而不是只标红整行；Monaco 可用editor.deltaDecorations()，CodeMirror 用setGutterMarker() - 大文档（>100KB）下，
ajv.validate()可能卡顿，建议加 timeout：若 300ms 未返回，降级只做基础语法检查
Schema 校验结果怎么映射回 HTML 结构
别试图把 JSON Schema 转成 HTML 属性再塞进 <input>，而是维护一份字段元数据映射表：{ "user.email": { type: "string", format: "email", required: true } }，校验出错时查表渲染提示。
要点：
- HTML 中每个可编辑字段必须有稳定、可推导的
name或data-path，例如name="config.api.timeout"，用于和instancePath对齐 -
"required": ["a", "b"]不等于所有字段都标红，而是当a和b都为空时才报错；单独缺a但b有值，可能不触发 - 数组项校验（
"items": { "type": "string" }）需按索引展开路径，如/users/0/name，对应name="users[0].name" - 嵌套
"anyOf"场景下，ajv默认只报第一个匹配失败的分支，需开启allErrors: true才显示全部问题
最常被忽略的是：Schema 校验器和 HTML 编辑器之间没有天然桥梁，所有路径映射、错误注入、状态同步都得手动桥接。哪怕用了 vanilla-jsonschema-form，它也只管渲染，不自动把编辑器内容喂给 ajv —— 这一跳，必须你自己写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
