JSONForm使用 JSONSchema 定义的结构化数据模型作为输入，并返回与该模式匹配的 Bootstrap3 友好HTML表单。
生成的HTML表单包括客户端验证逻辑，该逻辑在表单提交时向用户提供直接的内联反馈（前提是JSON模式验证器可用）。如果值有效，则JSON表单库使用提交的值来创建与数据模型匹配的JavaScript数据结构。
生成的HTML表单的布局可以通过简单的声明机制进行微调。
快速入门下面的示例创建了一个要求用户姓名和年龄的表单,用户名是必填字段，年龄可选。
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>GettingstartedwithJSONForm</title><linkrel="stylesheet"style="text/css"href="deps/opt/bootstrap.css"/></head><body><h1>GettingstartedwithJSONForm</h1><form></form><divid="res"class="alert"></div><scripttype="text/javascript"src="deps/jquery.min.js"></script><scripttype="text/javascript"src="deps/underscore.js"></script><scripttype="text/javascript"src="deps/opt/jsv.js"></script><scripttype="text/javascript"src="lib/jsonform.js"></script><scripttype="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>Ibegyourpardon?</p>');}else{$('#res').html('<p>Hello'+values.name+'.'+(values.age?'<br/>Youare'+values.age+'.':'')+'</p>');}}});</script></body></html>在浏览器中加载此页面，会呈现一个包含两个输入字段和一个提交按钮的表单，onSubmit函数在表单提交时调用。如果您在没有输入值的情况下按“提交”，或者如果您输入的年龄不是数字，则输入字段旁边会出现错误消息。
注意：此示例中的路径相对于JSON表单项目的根目录。
评论