JSON Form
=========
The JSON Form library is a JavaScript client-side library that takes a
structured data model defined using [JSON Schema](http://json-schema.org/) as
input and returns a [Bootstrap 3](https://getbootstrap.com/docs/3.3/)-friendly
HTML form that matches the schema.
The generated HTML form includes client-side validation logic that provides direct inline feedback to the user upon form submission (provided a JSON Schema validator is available). If values are valid, the JSON Form library uses submitted values to create the JavaScript data structure that matches the data model.
The layout of the generated HTML form may be entirely fine-tuned through
a simple declarative mechanism.
Getting started
---------------
The example below creates a form that asks for the user's name and age. The user's name is a required field, while the age is optional.
```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>
```
Loading this page in a browser renders a form with two input fields and a submit button. The ```onSubmit``` function is called upon form submission. If you press "Submit" without entering values or if the age you enter is not a number, error messages appear next to the input fields.
NB: Paths in this example are relative to the root of the JSON Form project.
Documentation
-------------
You can do much more with the JSON Form library. You may define a more complex data model that includes arrays and objects for instance, or you may control the layout of the form to include fieldsets, expandable sections or tabs. For more information, check the [reference documentation for JSON Form](http://github.com/joshfire/jsonform/wiki).
Playground
----------
If you're more of the acting type than of the reading type, the [JSON Form Playground](https://jsonform.github.io/jsonform/playground/index.html) is a simple JSON Form editor that lets you try out and extend all the examples in the doc.
Dependencies
------------
At a minimum, the JSON Form library depends on:
- [jQuery](http://jquery.com/)
- The [Underscore.js](http://underscorejs.org/) utility belt
The JSON Form library may require further libraries, depending on the features you need for the forms you need to render. In particular:
- [ACE](http://ace.ajax.org/) is needed to render rich text input fields. The [deps/opt/ace](https://github.com/joshfire/jsonform/tree/master/deps/opt/ace) folder contains a minimal set of files from ACE to render a JSON input field. Beware that the code of `ace.js` needs to be encapsulated in `(function(require,define,requirejs) {...})(undefined,undefined,undefined);` before it may be used within JSON Form.
- [Bootstrap](https://getbootstrap.com/docs/3.3/) v3.3 or above is more or less needed (unless you enjoy ugly forms, that is) if you don't provide your own styles. JSON Form only needs the ```bootstrap.css``` file.
- The [JSON Schema Validator](https://github.com/garycourt/JSV) is used to detect and report validation errors upon form submission. The [deps/opt](https://github.com/joshfire/jsonform/tree/master/deps/opt) folder contains a "build" of the JSON Schema Validator for use in JSON Form.
- [Bootstrap Dropdowns](https://github.com/twbs/bootstrap/blob/master/javascript.html) v2.0.3 or above is needed for ```imageselect``` fields.
- [jQuery UI Sortable](http://jqueryui.com/demos/sortable/) v1.8.20 or above is required for drag-and-drop support within arrays and tabarrays. Note the plugin itself depends on jQuery IU Core, jQuery UI Mouse, and jQuery UI Widget.
- [wysihtml5](http://jhollingworth.github.com/bootstrap-wysihtml5/) is required if the form uses ```wysihtml5``` textarea fields.
- [Spectrum](http://bgrins.github.com/spectrum/) is required if the form uses `color` fields.
All of these libraries are in the [deps](https://github.com/joshfire/jsonform/tree/master/deps) folder for now, although you might want to check their respective Web site for more recent versions.
NB: JSON Form also uses ```JSON.parse``` and ```JSON.stringify``` which is normally already natively supported by all modern browsers.
License
-------
The JSON Form library is licensed under the [MIT license](https://raw.github.com/joshfire/jsonform/master/LICENSE).
All the libraries that JSON Form may depend on are licensed under the MIT license, except for the JSON Schema Validator, licensed under the BSD 3 Clause license and the ACE editor licensed under the Mozilla tri-license (MPL/GPL/LGPL).
go语言beego框架搭建的简易后台管理系统 （231个子文件） 
app.conf 228B bootstrap.css 143KB layui.css 68KB spectrum.css 15KB layer.css 14KB layui.mobile.css 10KB laydate.css 7KB bootstrap-wysihtml5.css 3KB login.css 1KB code.css 1KB .DS_Store 6KB iconfont.eot 40KB glyphicons-halflings-regular.eot 20KB
hellobeego.exe 18.78MB hellobeego.exe~ 18.78MB
loading-0.gif 6KB loading-2.gif 2KB loading-1.gif 701B .gitignore 184B DataController.go 6KB UserController.go 3KB MenuModel.go 2KB MenuController.go 2KB BaseController.go 2KB router.go 2KB DataModel.go 2KB String.go 1KB default_test.go 1014B UserModel.go 1014B FormatController.go 801B initDB.go 739B LoginController.go 694B page.go 675B default.go 465B Common.go 400B init.go 276B main.go 261B Common.go 183B sysinit.go 176B HomeController.go 135B Cache.go 78B
hellobeego.tar.gz 21.1MB
index.html 4KB footerjs_edit.html 3KB edit.html 3KB examples.html 2KB index.html 2KB edit.html 2KB layout.html 2KB add.html 2KB index.html 2KB edit.html 2KB footerjs.html 2KB add.html 1KB footerjs.html 1KB footerjs.html 1KB example.html 1KB footerjs_add.html 1017B footerjs_edit.html 1015B expandable.html 790B layout_jfedit.html 727B footerjs_edit.html 602B footerjs_edit.html 547B index.html 497B tabs-array.html 487B prefix.html 483B array.html 482B defaults.html 470B complexlists.html 465B tabs-values.html 464B titleMap.html 461B layout_edit.html 459B index.html 458B tabarray.html 435B tabs.html 429B index.html 429B index.html 429B checkboxes.html 409B footerjs_add.html 385B footerjs_add.html 385B edit.html 65B add.html 62B index.html 5B hellobeego.iml 330B ace.js 526KB worker-css.js 368KB worker-javascript.js 339KB jquery.min.js 313KB layui.all.js 255KB bootstrap-wysihtml5.js 206KB jsonform.js 128KB jsv.js 113KB jquery-ui.js 96KB jquery.js 95KB worker-json.js 92KB mode-markdown.js 82KB spectrum.js 78KB mode-html.js 72KB underscore.js 52KB jquery.ui.sortable.js 42KB共 231 条
- 1
- 2
- 3
资源评论
qq_37573081
- 粉丝: 0
- 资源: 5
最新资源
- (源码)基于Spring Boot和Vue的后台管理系统.zip
- 用于将 Power BI 嵌入到您的应用中的 JavaScript 库 查看文档网站和 Wiki 了解更多信息 .zip
- (源码)基于Arduino、Python和Web技术的太阳能监控数据管理系统.zip
- (源码)基于Arduino的CAN总线传感器与执行器通信系统.zip
- (源码)基于C++的智能电力系统通信协议实现.zip
- 用于 Java 的 JSON-RPC.zip
- 用 JavaScript 重新实现计算机科学.zip
- (源码)基于PythonOpenCVYOLOv5DeepSort的猕猴桃自动计数系统.zip
- 用 JavaScript 编写的贪吃蛇游戏 .zip
- (源码)基于ASP.NET Core的美术课程管理系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
