JSON Form：轻松创建符合JSON Schema的表单

2026-01-22 05:25:48作者：邓越浪Henry

项目介绍

JSON Form 是一个基于JavaScript的客户端库，它能够将使用 JSON Schema 定义的结构化数据模型转换为符合 Bootstrap 3 风格的HTML表单。生成的表单不仅美观，还内置了客户端验证逻辑，能够在表单提交时直接向用户提供即时反馈。如果表单数据有效，JSON Form库将使用提交的值创建与数据模型匹配的JavaScript数据结构。

项目技术分析

JSON Form的核心功能是通过解析JSON Schema来生成HTML表单。它依赖于以下几个关键技术：

JSON Schema：用于定义数据模型的结构和验证规则。
Bootstrap 3：提供美观的表单样式和布局。
jQuery 和 Underscore.js：用于DOM操作和数据处理。
JSON Schema Validator：用于表单提交时的数据验证。

此外，JSON Form还支持多种扩展功能，如富文本输入、颜色选择器、拖放排序等，这些功能依赖于ACE、Spectrum、jQuery UI等库。

项目及技术应用场景

JSON Form适用于需要动态生成表单的场景，特别是在以下情况下：

Web应用开发：开发者可以使用JSON Schema快速定义表单结构，减少手动编写HTML表单的工作量。
数据收集与管理：在需要收集结构化数据的系统中，JSON Form可以确保数据的完整性和一致性。
前端开发：前端开发者可以通过简单的配置生成复杂的表单，提高开发效率。

项目特点

简单易用：通过简单的JSON Schema配置即可生成复杂的表单，无需手动编写大量HTML代码。
客户端验证：内置的客户端验证逻辑能够在表单提交时即时反馈错误信息，提升用户体验。
高度可定制：表单的布局和样式可以通过简单的声明机制进行精细调整。
丰富的扩展功能：支持多种扩展功能，如富文本输入、颜色选择器、拖放排序等，满足不同需求。
开源免费：基于MIT许可证，开发者可以自由使用和修改。

快速开始

以下是一个简单的示例，展示了如何使用JSON Form生成一个包含姓名和年龄字段的表单：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting started with JSON Form</title>
    <link rel="stylesheet" type="text/css" href="deps/opt/bootstrap.css" />
  </head>
  <body>
    <h1>Getting started with JSON Form</h1>
    <form></form>
    <div id="res" class="alert"></div>
    <script type="text/javascript" src="deps/jquery.min.js"></script>
    <script type="text/javascript" src="deps/underscore.js"></script>
    <script type="text/javascript" src="deps/opt/jsv.js"></script>
    <script type="text/javascript" src="lib/jsonform.js"></script>
    <script type="text/javascript">
      $('form').jsonForm({
        schema: {
          name: {
            type: 'string',
            title: 'Name',
            required: true
          },
          age: {
            type: 'number',
            title: 'Age'
          }
        },
        onSubmit: function (errors, values) {
          if (errors) {
            $('#res').html('<p>I beg your pardon?</p>');
          }
          else {
            $('#res').html('<p>Hello ' + values.name + '.' +
              (values.age ? '<br/>You are ' + values.age + '.' : '') +
              '</p>');
          }
        }
      });
    </script>
  </body>
</html>