表单 Schema 应定义为含字段元信息与条件逻辑的结构化描述，包含 type、name、label、required 等基础字段，以及 visibleIf、disabledIf、validation 等动态控制字段，数组保序，name 使用空数组语法如 name="contact[]"，并通过 template 标签安全渲染，避免 innerHTML XSS。
表单 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 来自配置中心时。
- 必须用
<template>标签定义字段片段，例如：<template id="input-field"><input name="{{name}}" type="{{type}}"></template> - 克隆后用
textContent或setAttribute注入变量，绝不用innerHTML = `<label>${label}</label>` - 如果需支持富文本 label（如含链接），必须走白名单过滤（如只允许
<a href>），且过滤逻辑在模板渲染前完成，不在 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 才能自动解析为数组对象 - 删除某一项时，必须移除整个
<div class="form-item">...节点，不能只清空value或设display: none——后者仍会被FormData收集 - 新增项永远 clone 模板，不计算当前数量再拼索引；JS 可用
data-index维护本地状态，但绝不映射到name
如何让模板引擎识别并执行 visibleIf 表达式
这不是 HTML 自身能力，需要轻量 JS 表达式求值器配合模板逻辑。别用 eval()，也别引入完整 JS 引擎。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
Function构造器沙箱化执行，例如：new Function('data', 'return ' + expression)(context)，前提是 expression 是白名单内的简单表达式（===、&&、||、括号） - 模板中写法类似：
<div class="field" data-visible-if="country === 'US' && hasTaxId">，渲染后 JS 扫描所有data-visible-if并求值，控制style.display - 注意布尔陷阱：
data.hasTaxId若为undefined或null，&&会短路，所以上下文必须补全默认值，比如后端传{hasTaxId: false}而非省略该字段 - 性能敏感场景下，表达式不宜嵌套过深或含函数调用；复杂逻辑应提前计算好布尔标志位，塞进上下文
region 值，但配置漏传或传错类型（如传字符串 "1" 而非数字 1），会导致所有 visibleIf 失效，且无任何报错提示。 
