JSON Form以 JSON 模式构建 HTML 表单-技术圈

JSON Form 使用 JSON Schema 定义的结构化数据模型作为输入，并返回与该模式匹配的 Bootstrap 3 友好 HTML 表单。

生成的 HTML 表单包括客户端验证逻辑，该逻辑在表单提交时向用户提供直接的内联反馈（前提是 JSON 模式验证器可用）。如果值有效，则 JSON 表单库使用提交的值来创建与数据模型匹配的 JavaScript 数据结构。

生成的 HTML 表单的布局可以通过简单的声明机制进行微调。

快速入门

下面的示例创建了一个要求用户姓名和年龄的表单,用户名是必填字段，年龄可选。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting started with JSON Form</title>
    <link rel="stylesheet" style="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>

在浏览器中加载此页面，会呈现一个包含两个输入字段和一个提交按钮的表单，onSubmit函数在表单提交时调用。如果您在没有输入值的情况下按“提交”，或者如果您输入的年龄不是数字，则输入字段旁边会出现错误消息。

注意：此示例中的路径相对于 JSON 表单项目的根目录。