Links

表单 Schema

Schema

在项目开发初期我们需要定义一个合适的 JSON Schema,所谓合适的 JSON Schema,就是指能满足现有的业务模型,尽量减少冗余的字段,又能支持一定的扩展。方便后续的维护更新扩展。一个 form 表单由 jsonSchema、uiSchema、formData、bizData 四个 json 来描述:
  • jsonSchema 中描述了表单的数据类型、数据源、数据项等配置;
  • uiSchema 描述了表单字段的渲染方法、渲染参数等;
  • formData 描述了表单初始填充的各个字段的初始值;
  • bizData 中是对表单字段的业务属性,注意的是,bizData 不会影响 Form 的渲染

react-json-schema

react-jsonschema-form 是最初由 Firefox 开源的能够从 JSON Schema 中渲染出实际表单的 React 组件。

JSONSchema

{
"title": "A registration form",
"description": "A simple form example.",
"type": "object",
"required": ["firstName", "lastName"],
"properties": {
"firstName": {
"type": "string",
"title": "First name"
},
"lastName": {
"type": "string",
"title": "Last name"
},
"age": {
"type": "integer",
"title": "Age"
},
"bio": {
"type": "string",
"title": "Bio"
},
"password": {
"type": "string",
"title": "Password",
"minLength": 3
},
"telephone": {
"type": "string",
"title": "Telephone",
"minLength": 10
}
}
}

UISchema

{
"firstName": {
"ui:autofocus": true,
"ui:emptyValue": ""
},
"age": {
"ui:widget": "updown",
"ui:title": "Age of person",
"ui:description": "(earthian year)"
},
"bio": {
"ui:widget": "textarea"
},
"password": {
"ui:widget": "password",
"ui:help": "Hint: Make it strong!"
},
"date": {
"ui:widget": "alt-datetime"
},
"telephone": {
"ui:options": {
"inputType": "tel"
}
}
}

合并的 Schema

{
"title": "A registration form",
"description": "A simple form example.",
"type": "object",
"required": ["firstName", "lastName"],
"properties": {
"firstName": {
"type": "string",
"title": "First name",
"ui:autofocus": true,
"ui:emptyValue": ""
},
"lastName": {
"type": "string",
"title": "Last name"
},
"age": {
"type": "integer",
"title": "Age",
"ui:widget": "updown",
"ui:title": "Age of person",
"ui:description": "(earthian year)"
},
"bio": {
"type": "string",
"title": "Bio",
"ui:widget": "textarea"
},
"password": {
"type": "string",
"title": "Password",
"minLength": 3,
"ui:widget": "password",
"ui:help": "Hint: Make it strong!"
},
"telephone": {
"type": "string",
"title": "Telephone",
"minLength": 10,
"ui:options": {
"inputType": "tel"
}
}
}
}