JSON表单结构需包含字段名、类型、标签、必填、默认值、选项及校验规则；JS遍历fields动态生成对应HTML控件，统一name处理radio/checkbox，for关联label；提交时收集各类型值并校验required字段。
前端通过 JSON 解析动态渲染表单，核心是把表单结构定义为可配置的 JSON 数据，再用 JavaScript 解析它、遍历字段、按类型生成对应 HTML 元素，并绑定事件和校验逻辑。
JSON 表单结构怎么设计
合理的 JSON 需包含字段名、类型、标签、是否必填、默认值、选项（如 select/radio）、校验规则等。例如：
{
"fields": [
{
"name": "username",
"label": "用户名",
"type": "text",
"required": true,
"placeholder": "请输入用户名"
},
{
"name": "gender",
"label": "性别",
"type": "radio",
"options": [
{"value": "male", "label": "男"},
{"value": "female", "label": "女"}
],
"required": true
},
{
"name": "hobbies",
"label": "兴趣爱好",
"type": "checkbox",
"options": [
{"value": "reading", "label": "阅读"},
{"value": "sports", "label": "运动"}
]
}
]
}
用 JS 动态创建表单元素
遍历 fields 数组，根据 type 创建不同控件。关键点：
- 用
document.createElement或模板字符串拼接 HTML - 为每个字段添加
name、id（推荐用name做唯一标识） - radio/checkbox 需统一
name，但各自value不同 - label 使用
for属性关联控件（或包裹方式更稳妥）
处理数据收集与提交
渲染完成后，要能方便地获取用户输入：
立即学习“Java免费学习笔记（深入）”；
- 给表单容器加
submit事件监听，阻止默认提交 - 遍历所有控件，按 type 提取值：text/number 取
.value；radio/checkbox 遍历 checked；select 取.value或多选时用.selectedOptions - 构建键值对对象，例如
{ username: "张三", gender: "male", hobbies: ["reading"] }
补充：支持简单校验与默认值
可在渲染时自动设置 value 或 checked，并在提交前检查 required 字段：
- 有
defaultValue就设初始值（text、select 默认选中；radio/checkbox 根据 value 匹配 checked） - 提交时对
required: true的字段判断是否为空或未选 - 错误时在对应字段旁插入提示信息（或加 class 高亮）
