現(xiàn)象

作為一名前端開發(fā)，「表單開發(fā)」是我們的家常便飯，一般我們需要做以下重復(fù)性工作：

• 編寫模板
• 編寫校驗(yàn)規(guī)則
• 獲取數(shù)據(jù)，提交表單

同時(shí)，后臺服務(wù)也需要編寫校驗(yàn)規(guī)則，隨著業(yè)務(wù)變動(dòng)或者溝通不及時(shí)，前后端校驗(yàn)規(guī)則可能會(huì)存在不一致問題。所以「前后端共用校驗(yàn)規(guī)則邏輯」也應(yīng)該納入考慮。

目標(biāo)

綜上，我們希望能減少重復(fù)性工作：通過配置自動(dòng)生成表單模板，同時(shí)這個(gè)配置最好還能描述表單校驗(yàn)相關(guān)(因?yàn)楸韱卧夭糠謱傩匀鏼in、max、required、pattern這些都會(huì)控制表單輸入，保障校驗(yàn))

栗子

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

渲染結(jié)果

enter image description here

更多Demo
文檔

技術(shù)選型

然后，現(xiàn)在表單經(jīng)常會(huì)通過JSON異步提交到服務(wù)端，所以技術(shù)選型如下：

• JSONSchema：業(yè)界用于描述 JSON 數(shù)據(jù)結(jié)構(gòu)的規(guī)范，包含了「表單數(shù)據(jù)描述」和 「表單校驗(yàn)」功能。
  • 可以滿足表單校驗(yàn)和數(shù)據(jù)描述
  • 同時(shí)這套規(guī)則在各端都有實(shí)現(xiàn)，所以也能保證前后端共用邏輯
  • 最后普通表單模板跟數(shù)據(jù)都匹配，所以也可以用于描述表單元素
• vue.js：依托于vue或react的「響應(yīng)式 (Reactive)」 和「組件化 (Composable)」 的強(qiáng)大之處，讓配置自動(dòng)生成UI變得更容易，更好擴(kuò)展；這里選擇了更熟悉的vue.js；
• vuex：考慮到存在表單元素嵌套，加上表單校驗(yàn)、錯(cuò)誤回顯等數(shù)據(jù)管理，所以選擇vuex進(jìn)行統(tǒng)一狀態(tài)管理；
• ajv：ajv是JSONSchema校驗(yàn)器
  • 支持最新的規(guī)范
  • $ref、const keyword、$data reference 規(guī)則可以更好復(fù)用一些基礎(chǔ)規(guī)則，同時(shí)完成類似于「密碼、重復(fù)密碼」等復(fù)雜校驗(yàn)
  • addFormat()、addKeyword()可以擴(kuò)展規(guī)則，更容易實(shí)現(xiàn)自定義校驗(yàn)
  • ajv-errors擴(kuò)展了JSON Schema，支持自定義錯(cuò)誤輸出

Form Definition

最后，JSONSchema在表單描述上并非無所不能：

• 通過類型規(guī)則能夠自動(dòng)生成的表單元素還是有限
• inline、tab等跟布局相關(guān)的不能支持
• placeholder、readonly等表單屬性沒有表現(xiàn)
• JSON schema 很多規(guī)則都是用來約定數(shù)據(jù)的，并不適合于表單生成，否則循環(huán)生成表單元素時(shí)要進(jìn)行很多過濾

所以，我們參考了angular schema form，增加了Form Definition描述，用來補(bǔ)充擴(kuò)展JSON Schema，它可以：

• 改變表單類型
• 定義表單順序
• 增刪描述
• 布局
• 表單屬性
• 一些擴(kuò)展表單元素的配置
• ...

即使沒定義Form Definition，內(nèi)部在表單渲染部分，也會(huì)將JSONSchema轉(zhuǎn)換成Form Definition，因?yàn)槠浣Y(jié)構(gòu)更適合循環(huán)表單渲染

所以，整體架構(gòu)如圖

enter image description here

jsonschema-form-vue

目前已經(jīng)提供了基礎(chǔ)組件11個(gè)(包含圖片上傳、編輯器等擴(kuò)展組件)和容器組件3個(gè)，未來還會(huì)根據(jù)情況繼續(xù)增加，同時(shí)也支持自己擴(kuò)展組件和規(guī)則。