从 JSON 模式构建 HTML 表单 - jQuery JSON 表单

JSON Form 是一个基于 JSON 的表单构建器库，它从客户端的 JSON 数据动态生成表单字段。

该库还可以在表单提交时根据数据模型验证用户输入的日期，并创建用提交的值初始化的结构化数据对象。

基本用法：

1. 在文档中加载必要的 jQuery 和 underscore.js 库。

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/underscore.min.js"></script>

2. 加载Bootstrap的样式表来美化生成的表单域。

<link rel="stylesheet"href="/path/to/bootstrap.css">

3. 根据需要加载其他可选资源：

• 王牌代码编辑器

• JSON 模式验证器

• jQuery UI 可排序

• Bootstrap 所见即所得编辑器

• 光谱颜色选择器

4. 在页面上创建一个空的表单元素。

<form class="form"></form>

5. 调用表单元素上的函数并在 JSON 中定义表单字段。

$('form').jsonForm({
  "schema": {
    "name": {
      "title": "Name",
      "description": "Nickname allowed",
      "type": "string"
    },
    "gender": {
      "title": "Gender",
      "description": "Your gender",
      "type": "string",
      "enum": [
        "male",
        "female",
        "alien"
      ]
    }
  }
});

6. 使用onSubmit回调验证提交时的数据。

$('form').jsonForm({
  onSubmit: function (errors, values) {
    if (errors) {
      // do something
    }
    else {
      // do something
    }
  }
});

变更日志：

v2.2.4 (2021-06-10)

• 添加对可拖动属性的支持

• Add the ability to select tabarray with rel

• Bugfixes

v2.2.3 (2021-03-24)

• Updates loop to ignore null value

• Added: New template in the playground for HTML Wysiwyg

v2.2.2 (2020-12-22)

• Bugs fixed.

• Add navigation tabs.

v2.2.1 (2020-08-25)

• Fix: only hide expanded in children

v2.2.0 (2020-06-11)

• Add htmlClass for sections

• Prevent activating a selectfieldset in a tabarray

• Bugfix

v2.1.6 (2020-01-31)

• Allow number type fields to accept decimal numbers

• Updated the binding of changes when using a legend

v2.1.5 (2019-06-19)

• Allow numeric step "any"

• Update template {{values}} data on drag and drop

• Bugfix

v2.1.4 (2019-05-02)

• Add legend/title for authfieldset and advancedfieldset

2019-03-22

• Fix CSS for radio buttons, add submit in example

2019-02-08

• Fixed specialise selector for tab content

2019-01-08

• Fix exclusiveMaximum condition

2019-01-07

• Fix issue with "disabled" attribute not being correctly handled for select items

2018-11-27

• Update jQuery UI (for sortable behavior)

2018-09-17

• Fixed number fields rendering text inputs.

2018-09-06

• Limit legend updating to direct children

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码

输入验证码后可免费复制

付费复制 免费复制 付费复制

付费后30天内不限量复制

价格:元

支付宝支付

联系客服