JSON Form 技术文档

2024-12-24 18:09:51作者：韦蓉瑛

1. 安装指南

在开始使用 JSON Form 前，您需要确保已经安装了以下依赖库：

jQuery
Underscore.js
Bootstrap v3.3 或以上版本
JSON Schema Validator
可能还需要以下库，具体取决于您的表单需求：
- ACE (用于富文本输入字段)
- Bootstrap Dropdowns (用于 imageselect 字段)
- jQuery UI Sortable (用于数组内的拖放支持)
- wysihtml5 (用于 wysihtml5 文本区域字段)
- Spectrum (用于颜色字段)

您可以从 JSON Form 的 deps 文件夹中找到这些库的副本，但建议您从各自的官方网站获取最新版本。

2. 项目的使用说明

JSON Form 是一个基于 JavaScript 的客户端库，它接受使用 JSON Schema 定义的结构化数据模型作为输入，并返回与 Bootstrap 3 兼容的 HTML 表单。

以下是一个简单的示例，展示了如何使用 JSON Form 创建一个包含用户名和年龄输入字段的表单：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JSON Form入门</title>
    <link rel="stylesheet" type="text/css" href="path/to/bootstrap.css" />
  </head>
  <body>
    <h1>JSON Form入门</h1>
    <form></form>
    <div id="res" class="alert"></div>
    <script type="text/javascript" src="path/to/jquery.min.js"></script>
    <script type="text/javascript" src="path/to/underscore.js"></script>
    <script type="text/javascript" src="path/to/jsv.js"></script>
    <script type="text/javascript" src="path/to/jsonform.js"></script>
    <script type="text/javascript">
      $('form').jsonForm({
        schema: {
          name: {
            type: 'string',
            title: '姓名',
            required: true
          },
          age: {
            type: 'number',
            title: '年龄'
          }
        },
        onSubmit: function (errors, values) {
          if (errors) {
            $('#res').html('<p>请检查输入</p>');
          } else {
            $('#res').html('<p>你好 ' + values.name + '。' +
              (values.age ? '<br/>你 ' + values.age + ' 岁。' : '') +
              '</p>');
          }
        }
      });
    </script>
  </body>
</html>

在浏览器中加载这个页面将显示一个包含两个输入字段和一个提交按钮的表单。

3. 项目API使用文档

JSON Form 的 API 主要包括用于初始化表单的 .jsonForm() 方法。该方法接受两个主要参数：

schema: 一个定义表单结构的 JSON Schema 对象。
options: 一个可选的对象，可以包含 onSubmit 函数，它将在表单提交时被调用。

更多关于 JSON Form API 的信息可以在其 GitHub Wiki 上找到。

4. 项目安装方式

要从源代码安装 JSON Form，您可以使用以下命令：

git clone https://github.com/joshfire/jsonform.git

然后，将所需的库文件从 deps 文件夹复制到您的项目中，并按照上面的示例编写 HTML 文件。

确保所有路径都是正确的，并且指向了正确的文件位置。

以上就是关于 JSON Form 的技术文档，希望对您有所帮助。

jsonform

Build forms from JSON Schema. Easily template-able. Compatible with Bootstrap 3 out of the box.

项目地址：https://gitcode.com/gh_mirrors/js/jsonform

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

leetcode

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

喝着茶写代码！最易用的自托管一站式代码托管平台，包含Git托管，代码审查，团队协作，软件包和CI/CD。

RuoYi-Vue3

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Ascend Extension for PyTorch