JSON Form 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
JSON Form 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
JSON Form 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript HTML/CSS
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 罗奇奇
适用人群 未知
收录时间 2021-11-30

软件简介

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 表单项目的根目录。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
暂无内容
暂无内容
0 评论
1 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部