Vue JSON Schema Form 快速构建动态表单完整指南-优快云博客

Vue JSON Schema Form 快速构建动态表单完整指南

【免费下载链接】vue-json-schema-form 基于Vue/Vue3，Json Schema 和 ElementUi/antd/iview3/naiveUi 等生成 HTML Form 表单，用于活动编辑器、h5编辑器、cms等数据配置；支持可视化生成表单Schema 。 Generate a form using Vue/Vue3, Json Schema and ElementUi/antdv/iview3/naiveUi 项目地址: https://gitcode.com/gh_mirrors/vu/vue-json-schema-form

项目概述

Vue JSON Schema Form 是一个基于 Vue/Vue3 和 JSON Schema 规范的开源表单生成库，支持多种主流UI框架，包括ElementUi、antd、iview3和naiveUi。该项目专为活动编辑器、H5页面配置、CMS数据管理等场景设计，通过声明式的JSON Schema配置即可生成完整的HTML表单。

核心特性

多框架支持：兼容 Vue2 和 Vue3，适配多种UI组件库
声明式配置：通过JSON Schema描述表单结构和验证规则
可视化工具：内置表单Schema生成器，支持可视化配置
完整校验：基于ajv实现强大的表单数据校验
灵活扩展：支持自定义组件和验证规则

快速开始

安装依赖

npm install @lljj/vue-json-schema-form
# 或使用yarn
yarn add @lljj/vue-json-schema-form

基础使用示例

创建一个用户信息表单，包含用户名、年龄和个人简介字段：

<template>
  <VueForm 
    v-model="formData" 
    :ui-schema="uiSchema" 
    :schema="schema"
  />
</template>

<script>
import VueForm from '@lljj/vue-json-schema-form';

export default {
  components: {
    VueForm
  },
  data() {
    return {
      formData: {},
      schema: {
        type: 'object',
        required: ['userName', 'age'],
        properties: {
          userName: { 
            type: 'string', 
            title: '用户名', 
            default: 'Liu Jun' 
          },
          age: { 
            type: 'number', 
            title: '年龄' 
          },
          bio: { 
            type: 'string', 
            title: '签名', 
            minLength: 10, 
            default: '知道的越多、就知道的越少' 
          }
        }
      },
      uiSchema: {
        bio: {
          'ui:options': {
            placeholder: '请输入你的签名',
            type: 'textarea',
            rows: 1
          }
        }
      }
    };
  }
};
</script>

表单配置详解

JSON Schema 配置

JSON Schema用于定义表单的数据结构和验证规则：

schema: {
  type: 'object',
  required: ['name', 'email'],
  properties: {
    name: {
      type: 'string',
      title: '姓名',
      minLength: 2
    },
    email: {
      type: 'string',
      title: '邮箱',
      format: 'email'
    },
    age: {
      type: 'number',
      title: '年龄',
      minimum: 0,
      maximum: 150
    }
  }
}

UI Schema 配置

UI Schema用于控制表单的显示方式和交互行为：

uiSchema: {
  name: {
    'ui:options': {
      placeholder: '请输入您的姓名'
    }
  },
  email: {
    'ui:options': {
      type: 'email'
    }
  }
}

实用工具函数

表单验证工具

项目提供了完整的表单验证工具集：

import {
  ajvValidateFormData,
  validateFormDataAndTransformMsg,
  isValid
} from '@lljj/vjsf-utils/schema/validate';

// 直接调用ajv验证schema
ajvValidateFormData(...args);

// 校验数据并处理多语言
validateFormDataAndTransformMsg(...args);

// 检查数据是否校验成功
isValid(...args);

数组工具函数

import arrayUtils from '@lljj/vjsf-utils/arrayUtils';
// 数组相关的工具类方法

表单工具函数

import formUtils from '@lljj/vjsf-utils/formUtils';
// 表单相关的工具类方法

项目启动指南

安装所有依赖

yarn install

启动开发环境

同时运行Playground、表单Schema生成器和活动编辑器：

yarn run demo:dev

单独启动特定页面

只运行Playground：

yarn run demo:dev --dir=index

只运行表单Schema生成器：

yarn run demo:dev --dir=schema-generator

应用场景

活动编辑器

通过JSON Schema描述活动数据结构，动态生成配置表单，支持实时预览和数据一致性校验。

H5页面配置

在移动端页面开发中，快速生成各种数据配置表单，支持文本、图片、链接等多种元素类型。

CMS数据管理

在内容管理系统中统一表单生成逻辑，提高开发效率，降低维护成本。

开发理念

Vue JSON Schema Form 的设计初衷是为了解决前端可视化编辑中的数据配置表单通用性问题。通过JSON Schema描述数据结构，动态生成表单，不仅减少了重复工作，还能让服务端基于同一份schema保持和前端一致的校验规则。

技术架构

项目采用模块化设计，核心功能与UI框架实现分离：

核心模块：处理JSON Schema解析和基础表单逻辑
UI适配层：为不同UI框架提供定制化组件
工具库：提供验证、国际化、数据处理等通用功能

通过本指南，您可以快速掌握Vue JSON Schema Form的核心用法，在实际项目中高效构建动态表单应用。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考