What is VSchemaForm

Check out our website for more

background

The form problem, no matter in the era of jQuery or Vue/React, is always a pain for front-end engineers, but there is no way to solve it. Business needs are diverse. For middle and back business, form page and report page are basically the core presentation form of middle and back business. How to help developers develop forms more efficiently, the current traditional form development method:

  • Manually manage form state
  • Collect form data manually
  • Manually manage form validation status

What are the problems?

  • Form state management becomes increasingly difficult to maintain and requires the introduction of a state management library
  • The data structure of traditional form development is usually flat structure, which can not deal with the situation of nested complex data well. If it has to deal with, the workload will be very large
  • When a business needs to dynamically output forms, it has to develop a component that dynamically outputs forms based on some data protocol
  • When the business needs to configure the output form in the visual interface, it needs to develop a DYNAMIC output form component based on JSON

plan

Based on the exploration of the above problems, and inspired by UForm, VSchemaForm Vue form solution was developed:

  1. Use JSON to describe form content
  2. Supports multiple platforms (mobile and desktop)
  3. Support for multiple component libraries (Element UI, Ant Design Vue, Antd Mobile Vue, Vant)
  4. Support for nested forms
  5. Supports array deconstruction of arbitrary data
  6. Support side effect function, unified processing of data linkage in the form
  7. Support for deconstructing data, reducing custom data transformation
  8. Support form validation (using Async-Validator and built-in validation of commonly used email, phone number, IP address, ID number, URL and other data formats)
  9. Support extension of custom components as input components, details components, layout components, etc
  10. Supports adding Ordinal Numbers before form items

Support complex layouts

  1. Unlimited levels of nested objects can be supported
  2. Object array support
  3. Supports custom layout
  4. Built-in grid, card, text concatenation, step by step layout

A sample

const schema = {
  expandSelect: {
    title: 'Expand radio'.required: true.type: 'expand-select'.props: {options}
  },
  select: {
    title: 'radio'.required: true.type: 'select'.props: {options, clearable: true}},multiSelect: {
    title: 'alternative'.required: true.type: 'select'.array: true.props: {options}
  },
  expandMultiSelect: {
    title: 'Expand multiple selection'.required: true.type: 'expand-select'.array: true.props: {options}
  },
  text: {
    title: 'Multiline text'.required: true.type: 'text'
  },
  zh: {
    title: 'Chinese only'.required: true.type: 'text'.format: 'zh'.default: 'not chinese'
  },
  string: {
    title: 'Single line text'.type: 'string'.required: true.placeholder: 'Please enter text'
  },
  url: {
    title: 'link'.rules: 'url'.type: 'url'
  },
  integer: {
    title: 'integer'.type: 'integer'.required: true.min: 100.max: 200
  },
  double: {
    title: 'decimal'.required: true.type: 'double'}}Copy the code

See more documentation examples and source code, but I won’t go into that here