基于配置的表单渲染引擎的HTML实现

从实际项目经验来看，动态表单渲染的根基不在于你写了多少行 HTML，而在于你如何设计那份描述表单结构的“Schema”。

表单 Schema 如何定义才支持动态渲染

关键不是写 HTML，而是设计可被模板引擎消费的结构化描述。Schema 必须包含字段级元信息，且能表达条件逻辑。

• type、name、label、required 是基础字段，但仅这些远远不够
• 必须支持 visibleIf 或 disabledIf 这类表达式字段，例如：{"visibleIf": "country === 'HK'"}，后端传入上下文变量 {country: "HK"} 后由模板引擎求值
• 避免把校验规则硬编码进 HTML 属性（如 pattern），应统一放在 Schema 的 validation 字段里，由渲染层注入——否则国际化或运行时切换会非常痛苦
• 字段顺序不能靠 DOM 顺序隐式决定，Schema 数组本身要保序；否则模板引擎重排后，name="items[]" 提交顺序会错乱

用原生 template + JS 渲染比直接 innerHTML 安全得多

直接拼接字符串插入 innerHTML 极易引入 XSS，尤其当 Schema 中的 label 或 placeholder 来自配置中心时。

• 必须用 标签定义字段片段，例如：
• 克隆后用 textContent 或 setAttribute 注入变量，绝不用 innerHTML = `${label}`
• 如果需支持富文本 label（如含链接），必须走白名单过滤（如只允许 ），且过滤逻辑在模板渲染前完成，不在 JS 插入时做
• 注意：template.content.cloneNode(true) 不会执行内联脚本，这是安全前提；若用了 onclick 等内联事件，得改用事件委托绑定

name 属性必须用空数组语法，否则后端收不到结构化数据

动态表单最常崩在 name 设计上。浏览器提交机制不认索引，只认语义分组。

• 所有同类字段统一用 name="contact[]"，不要生成 name="contact[0]"、name="contact[1]"
• 嵌套结构用双空键：name="addresses[][street]"、name="addresses[][city]"，这样 PHP/Python/Django 才能自动解析为数组对象
• 删除某一项时，必须移除整个
  ... 节点，不能只清空 value 或设 display: none——后者仍会被 FormData 收集
• 新增项永远 clone 模板，不计算当前数量再拼索引；JS 可用 data-index 维护本地状态，但绝不映射到 name

如何让模板引擎识别并执行 visibleIf 表达式

这不是 HTML 自身能力，需要轻量 JS 表达式求值器配合模板逻辑。别用 eval()，也别引入完整 JS 引擎。

• 推荐用 Function 构造器沙箱化执行，例如：new Function('data', 'return ' + expression)(context)，前提是 expression 是白名单内的简单表达式（===、&&、||、括号）
• 模板中写法类似：
  ，渲染后 JS 扫描所有 data-visible-if 并求值，控制 style.display
• 注意布尔陷阱：data.hasTaxId 若为 undefined 或 null，&& 会短路，所以上下文必须补全默认值，比如后端传 {hasTaxId: false} 而非省略该字段
• 性能敏感场景下，表达式不宜嵌套过深或含函数调用；复杂逻辑应提前计算好布尔标志位，塞进上下文

真实项目中最容易被跳过的环节是上下文变量的完整性校验——字段依赖某个 region 值，但配置漏传或传错类型（如传字符串 "1" 而非数字 1），会导致所有 visibleIf 失效，且无任何报错提示。这一点必须警惕。