現象

作為一名前端開發，「表單開發」是我們的家常便飯，一般我們需要做以下重復性工作： 編寫模板 編寫校驗規則 * 獲取數據，提交表單

同時，后臺服務也需要編寫校驗規則，隨著業務變動或者溝通不及時，前后端校驗規則可能會存在不一致問題。所以「前后端共用校驗規則邏輯」也應該納入考慮。

目標

綜上，我們希望能減少重復性工作：通過配置自動生成表單模板，同時這個配置最好還能描述表單校驗相關(因為表單元素部分屬性如min、max、required、pattern這些都會控制表單輸入，保障校驗)

栗子

先通過一個簡單的例子看下效果：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: '姓名'},phone: {type: 'string',title: '手機',pattern: '^1[3578]d{9}$',description: '請輸入正確的手機號碼'}},required: ['name', 'phone']},model: {name: 'xxx'}}} } </script>

渲染結果

更多Demo 文檔

技術選型

然后，現在表單經常會通過JSON異步提交到服務端，所以技術選型如下： JSONSchema：業界用于描述 JSON 數據結構的規范，包含了「表單數據描述」和 「表單校驗」功能。 * 可以滿足表單校驗和數據描述 * 同時這套規則在各端都有實現，所以也能保證前后端共用邏輯 * 最后普通表單模板跟數據都匹配，所以也可以用于描述表單元素 vue.js：依托于vue或react的「響應式 (Reactive)」 和「組件化 (Composable)」 的強大之處，讓配置自動生成UI變得更容易，更好擴展；這里選擇了更熟悉的vue.js； vuex：考慮到存在表單元素嵌套，加上表單校驗、錯誤回顯等數據管理，所以選擇vuex進行統一狀態管理； ajv：ajv是JSONSchema校驗器 * 支持最新的規范 * $ref、const keyword、$data reference 規則可以更好復用一些基礎規則，同時完成類似于「密碼、重復密碼」等復雜校驗 * addFormat()、addKeyword()可以擴展規則，更容易實現自定義校驗 * ajv-errors擴展了JSON Schema，支持自定義錯誤輸出

Form Definition

最后，JSONSchema在表單描述上并非無所不能： 通過類型規則能夠自動生成的表單元素還是有限 inline、tab等跟布局相關的不能支持 placeholder、readonly等表單屬性沒有表現 JSON schema 很多規則都是用來約定數據的，并不適合于表單生成，否則循環生成表單元素時要進行很多過濾

所以，我們參考了angular schema form，增加了Form Definition描述，用來補充擴展JSON Schema，它可以： 改變表單類型 定義表單順序 增刪描述 布局 表單屬性 一些擴展表單元素的配置 * ...

即使沒定義Form Definition，內部在表單渲染部分，也會將JSONSchema轉換成Form Definition，因為其結構更適合循環表單渲染

所以，整體架構如圖

jsonschema-form-vue

目前已經提供了基礎組件11個(包含圖片上傳、編輯器等擴展組件)和容器組件3個，未來還會根據情況繼續增加，同時也支持自己擴展組件和規則。

總結

以上是生活随笔為你收集整理的antd 的form 表单怎么回显数据_jsonschema-form-vue基于JSONSchema的表单自动生成方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。