JSONForm 动态表单字段显示控制技术解析

背景介绍

JSONForm 是一个基于 JSON Schema 构建 Web 表单的 JavaScript 库，它允许开发者通过 JSON 配置快速生成复杂的表单界面。在实际应用中，我们经常遇到需要根据用户选择动态显示或隐藏某些表单字段的需求。

问题场景

在一个实际项目中，存在一个包含多个选项的选择列表（select），其中有两个特殊选项需要额外的自定义数据输入字段。当用户选择这两个特殊选项时，需要显示对应的输入字段；选择其他选项时，则隐藏这些字段。同时，还需要考虑表单初始化时可能已经存在预选值的情况。

技术实现方案

1. 数据结构设计

首先定义 JSON Schema 结构，其中包含一个选择字段和两个条件显示字段：

{
  "properties": {
    "when": {
      "type": "string",
      "enum": ["anytime", "morning", "afternoon", "evening", "date-format", "date-time-format"]
    },
    "date-format": {
      "type": "string"
    },
    "date-time-format": {
      "type": "string"
    }
  }
}

2. 表单配置

在表单配置中，我们为选择字段添加 onChange 事件处理程序，用于动态控制相关字段的显示状态：

{
  "type": "fieldset",
  "items": [
    {
      "title": "when to show",
      "key": "compliments.config.compliments[].when",
      "onChange": "动态显示控制函数"
    },
    {
      "key": "compliments.config.compliments[].date-format",
      "title": "date to show",
      "placeholder": "YYYY-MM-DD",
      "fieldHtmlClass": "date-format",
      "type": "text"
    },
    {
      "key": "compliments.config.compliments[].date-time-format",
      "title": "date/time to show",
      "placeholder": "min hour day_of_month month dow",
      "type": "text",
      "fieldHtmlClass": "date-time-format"
    }
  ]
}

3. 动态显示控制

实现动态显示控制的核心逻辑如下：

1. CSS 初始隐藏：通过 CSS 默认隐藏所有条件字段

.xxx fieldset div[class$="format"] {
  display: none;
}

2. jQuery 选择器：使用 jQuery 查找并显示符合条件的字段

$('.xxx div[class$="---when"] option:selected').each(function() {
  var o = $(this).val();
  if(o.endsWith('format')) {
    $(this).closest('fieldset').find('div[class$="'+o+'"]').css('display','block')
  }
})

4. 表单加载事件处理

为了确保在表单初始化时正确处理预选值，我们使用自定义事件机制：

// 定义自定义事件
const event = new Event("form_loaded");

// 表单生成后触发事件
$("#result-form").jsonForm(data);
document.dispatchEvent(event);

// 事件处理程序
$(document).on('form_loaded', function() {
  // 初始化显示逻辑
});

技术要点解析

1. DOM 操作策略：通过 jQuery 的 DOM 遍历方法（closest、find）精确定位需要控制的元素

2. CSS 类名匹配：利用 CSS 属性选择器（[class$="..."])匹配特定结尾的类名

3. 事件驱动架构：使用自定义事件实现模块间的松耦合通信

4. 动态表单状态管理：同时处理用户交互和初始化状态两种场景

扩展思考

1. 验证逻辑：可以为特殊字段添加验证规则，如日期格式验证、cron 表达式验证等

2. 性能优化：对于大型表单，可以考虑使用事件委托减少事件监听器数量

3. 响应式设计：结合现代 CSS 特性如 Grid 或 Flexbox 实现更灵活的布局

这种动态表单字段控制方案不仅适用于 JSONForm，其核心思想也可以应用于其他表单库或自定义表单实现中，具有很好的通用性和参考价值。