Jsonschema-form-vue is a library that automatically generates forms based on JSON Schema using vue.js

The phenomenon of

As a front-end developer, “form development” is something we do all the time, and typically we do the following repetitive tasks:

Write a template
Write verification rules
Get the data, submit the form

At the same time, background services also need to compile verification rules. As services change or communication is delayed, the verification rules of the front and back ends may be inconsistent. Therefore, “front – and back-end shared verification rule logic” should also be considered.

The target

In summary, we want to reduce repetitive work by configuring the automatic generation of form templates and also by describing form validation (because some form element attributes such as min, Max, required, and Pattern control form input and ensure validation).

chestnuts

Let’s start with a simple example: Demo, Code

<template> <vue-form :schema="schema" :model="model" > </vue-form> </template> <script> export default { data () { Return {schema: {title: 'basic', type: 'object', properties: {name: {type: 'string', title: 'name'}, phone: {type: 'string' title: 'mobile phone', the pattern: '[3578] ^ 1 \ \ d {9} $', the description:' please enter the correct phone number '}}, required: [' name ', 'phone']}, model: { name: 'xxx' } } } } </script>Copy the code

The renderings

Technology selection

However, forms are now often submitted asynchronously to the server via JSON, so the technique is as follows:

JSONSchema: An industry specification for describing JSON data structures, including form data description and form validation.
- Can satisfy form checksum data description
- At the same time, this set of rules are implemented at each end, so it can ensure the same logic between the front and back ends
- Finally, the normal form template matches the data, so it can also be used to describe form elements
Vue.js: The power of “Reactive” and “Composable” built on Vue or React makes it easier and more scalable to configure auto-generated UIs; The more familiar vue.js has been chosen;
Vuex: Considering the existence of nested form elements and data management such as form verification and error echo, VUEX is selected for unified state management.
ajv: ajv is the JSONSchema validator
- Support the latest specifications
- $ref, const keyword, $data referenceRules can better reuse some basic rules, while completing complex verification such as “password, double password”
- AddFormat, addKeyword () ()Rules can be extended to make custom validation easier
- Ajv-errors extends JSON Schema to support custom error output

Form Definition

Finally, JSONSchema is not omnipotent in form descriptions:

The number of form elements that can be automatically generated by type rules is still limited
Layout – related inline, TAB, and others are not supported
Placeholder, readonly and other form properties have no representation
JSON Schema rules, many of which are used to contract data, are not suitable for form generation, otherwise there will be a lot of filtering when the form elements are looping

So, we referenced Angular Schema forms and added a form Definition description to complement the JSON Schema extension:

Changing form types
Defining form order
Add or delete description
layout
The form properties
Configuration of some extended form elements
.

Even if no Form Definition is defined, JSONSchema is internally converted to Form Definition in the Form rendering part because its structure is more suitable for circular Form rendering

Therefore, the overall architecture is shown in the diagram