揭秘开源低代码可视化表单设计器：如何轻松实现动态表单的自动化校验？

背景

开源库 vue-form-design基于 Vue3 的可视化表单设计器，拖拽式操作让你快速构建一个表单, 让表单开发简单而高效。

低代码表单设计器, 可以通过拖拽的形式生成 n 种不同类型的表单, 这样的表单如何校验数据的准确性?

就需要用到 element-plus 提供的表单校验相关规则, 并且该规则是一个对象, 那我们是不是可以配置 json 来进行校验?

在开发表单设计器初期, 确实是通过 json 配置的形式进行表单校验, 但是这种方法有几大缺陷

• 局限于 element-plus 提供出来的校验方式, 如必填, 数字校验, 长度校验等
• 保存动态表单配置时会转成 json 字符串, 如果使用 element-ui 自定义校验函数时,会转换成空 (就算能使用函数的 toString 方法转成字符串, 但校验函数的代码提示不好, 不能自定义参数等)
• 入门门槛高, 需了解 element-plus 校验方式, 需要一定的基础
• 流程复杂, 不能通过下拉框枚举出常见校验直接使用
• 动态表单, 顾名思义, 可以通过表单配置的形式来校验输入的准确性, 但 json 配置的方式不支持

从以上几大缺陷可知, 使用 json 校验方式的扩展性, 可维护性, 便捷性, 灵活性都没有, 所以才需要重新设计动态表单的校验方式

技术

组件库使用的是element-plus, 所以相关表单校验的设计要符合element-plus提供的规则

如以下规则:

{
  "rules": {
    "name": [
      { "required": true, "message": "请输入活动名称", "trigger": "blur" },
      { "min": 3, "max": 5, "message": "长度在 3 到 5 个字符", "trigger": "blur" }
    ],
    "region": [{ "required": true, "message": "请选择活动区域", "trigger": "change" }]
  }
}

自定义校验函数规则:

var validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (this.ruleForm.checkPass !== "") {
      this.$refs.ruleForm.validateField("checkPass");
    }
    callback();
  }
};

为了提升扩展性, 可以通过编写自定义校验函数的形式进行校验, 涉及到代码开发, 所以需要一个可提示、可编写注释的开源编辑器codemirror

CodeMirror 是基于 js 的源代码编辑器组件，它支持 javascript 等多种高级语言，tampermonkey 内置的代码编辑器就是基于它。它的按键组合方式兼容 vim，emacs 等，调用者还可自定义'自动完成'的列表窗口，自由度极高，相当成熟。

使用

import { basicSetup } from "codemirror";
import VueCodemirror from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";

// 全局注册
app.use(VueCodemirror, {
  autofocus: true,
  disabled: false,
  indentWithTab: true,
  tabSize: 2,
  placeholder: "Code goes here...",
  extensions: [basicSetup, javascript()],
});

以上是可以编写 javascript 相关代码, 如果我们要编写 css, json 呢? 正好在该库也使用到

import { json } from "@codemirror/lang-json";
export default {
    setup(){
        const extensions = [json()];
        return {
            extensions
        }
    }
}

template

 <codemirror
          v-model="code"
          placeholder="Code goes here..."
          mode="text/json"
          :style="{ height: '400px' }"
          :extensions="extensions"
          :autofocus="true"
          :indent-with-tab="true"
          :tab-size="2"
        />

通过以上代码, 就可以在项目中使用 codemirror 来编写 javascript 代码

架构设计

通过以上两种技术, 我相信大家都知道 element-plus 两种校验方式

那如何解决几大缺陷?

我是如何做的? 以下三种方式进行解决

枚举校验

把常见的、已知的校验规则枚举出来, 直接通过文件引用的方式遍历出校验列表进行选择(最好是维护到后台里面, 通过接口获取, 这样方便增删改查)

如:

// 数字校验规则
const validateNumber = `(rule, value, callback) => {
  console.log(rule);
  
  if (value === "" || value == null) {
    callback(new Error("请输入"));
  } else if (!/^[0-9]*$/.test(value)) {
    callback(new Error("必须为数字"));
  }
  callback();
}`;
// 数字校验规则（小数点保留两位）
const validateNumberD2 = `(rule, value, callback) => {
    if (value === "" || value == null) {
      callback(new Error("请输入"));
    } else if (!/^([1-9]+[\d]*(.[0-9]{1,2})?)$/.test(value)) {
      callback(new Error("必须为数字,且小数点最多两位"));
    }
    callback();
  }`;
const ruleList = [
  {
    label: "数字校验规则",
    validator: validateNumber,
  },
  {
    label: "数字校验规则（小数点保留两位）",
    validator: validateNumberD2,
  },
];
export default ruleList;

这样就可以通过下拉框的形式选择需要使用的校验方式

表单自定义配置

把 element-plus 校验规则进行总结, 归纳出所有组合类型, 通过表单配置的形式选择

这样就可以把校验规则进行可视化配置, 直观配置需要的校验规则, 学习成本低

同时校验规则表单列表使用到了动态表单组件(上图), 即 vue-form-design 暴露出来的两个组件其一(渲染表单组件和配置表单组件)

自定义校验函数

上文可知, 自定义校验函数使用到了 CodeMirror, 这样的话就可以编写代码

上图可知, 包括两个配置

• 函数触发事件配置, blur 还是 change
• 校验函数配置

该配置只写函数体, 如果整个函数可配, 可能导致参数使用错误, 并且把参数位置写死, 并和 element-plus 保持一致, 这样后期好处理, 降低配置错误率.并且把每个参数的作用列出来, 方便开发. 同时在 element-plus 固有的参数基础上, 新增了第四个参数, 表示当前表单配置数据, 方便基于其他表单数据作为校验判断的基础

使用场景如:

假设有两个表单如图, 一个是开关表单, 一个是校验表单

文本表单要求开关表单配置为 true 才校验通过, 否则不通过

则配置自定义函数

这样就使用到了第四个参数, 即拿到当前表单列表页数据{ceshi: true, verify: ""}, 进行校验

通过以上方法, 极大的提高了表单校验的扩展性, 灵活性

使用 codemirror 返回的函数体为一个字符串, 这种数据结构就能方便存储和进行各种处理, 如下

{
  "rule": [
    {
      "type": "func",
      "title": "自定义函数规则",
      "value": {
        "trigger": "blur",
        "func": "if(mainData.ceshi){callback()}else{\n  callback(new Error(\"请变更为false\"));\n}\n"
      }
    }
  ]
}

通过以上三种方法就能解决使用 json 配置的所有缺陷

下面的 json 是 element-plus 的校验规则例子, 大家发现了什么规则? 是不是字段的校验规则的数据结构是数组, 代表可配置多个校验规则

{
  "rules": {
    "name": [
      { "required": true, "message": "请输入活动名称", "trigger": "blur" },
      { "min": 3, "max": 5, "message": "长度在 3 到 5 个字符", "trigger": "blur" }
    ]
  }
}

所以为了和 element-plus 保持一致, 我们可以使用以上三个方法动态遍历设置校验规则

运用

如图, 在 vue-form-design 中可动态配置校验方式(自定义枚举、自定义校验函数、高级模式), 并按对应校验方式配置校验规则

一个表单最后生成的数据结构如下:

[
  {
    "ControlType": "Text",
    "nameCn": "文本框",
    "id": "QGR69RscPmjnFqHW7JeMB",
    "layout": false,
    "data": {
      "fieldName": "Text_N-A6Ft1FUd8NJyrWN3LL2",
      "label": "标签名称",
      "tip": "",
      "placeholder": "",
      "showRule": "{}",
      "required": false,
      "rule": [
        {
          "type": "enum",
          "title": "自定义枚举",
          "value": "(rule, value, callback) => {\n    if (value === \"\" || value == null) {\n      callback(new Error(\"请输入\"));\n    } else if (!/^1(?:3d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8d|9d)d{8}$/.test(value)) {\n      callback(new Error(\"请输入正确的值\"));\n    }\n    callback();\n  }"
        },
        {
          "type": "func",
          "title": "自定义函数规则",
          "value": {
            "trigger": "blur",
            "func": "callback()"
          }
        },
        {
          "type": "high",
          "title": "高级模式",
          "value": {
            "message": "必填",
            "trigger": "change",
            "required": true,
            "ruleType": "1"
          }
        }
      ],
      "default": "",
      "csslist": []
    }
  }
]

最后渲染表单组件时再处理每个表单的校验规则, 拼接成 element-plus 要求的数据接口即可.

如上数据结构,最后转换为如下 校验规则 json:

{
  "rules": {
    "Text_N-A6Ft1FUd8NJyrWN3LL2": [
      // ...
    ]
  }
}

校验实现

上文可知, 三种校验方式(自定义枚举、自定义校验函数、高级模式), 目的是转换为 element-plus 要求的规则

只要我们把配置的规则进行转换就能实现校验

function getFormListRules(rules: any[]) {
  const result: any[] = [];
  if (Array.isArray(rules) && rules && rules.length > 0) {
    rules.forEach((item) => {
      if (item.type == "enum") {
        // 自定义枚举 上文可知我们枚举出来的是函数字符串, 使用eval执行返回函数
        const func = eval(`(${item.value})`);
        result.push({
          validator: func,
          trigger: "blur",
        });
      } else if (item.type == "func") {
        // 自定义函数校验 配置的是函数体 所以我们需要自己拼接出函数, 第四个参数需要通过使用默认参数的形式进行传参(利用到了闭包), 否则element-plus底层获取不到当前表单数据
        const mainData = props.formResult;
        const func = eval(`((rule, value, callback, mainData = mainData) => {${item.value.func}})`);
        result.push({
          validator: func,
          trigger: "blur",
        });
      } else if (item.type == "high") {
        //  高级模式 是通过表单配置出element-plus支持的数据, 所以不做特殊处理, 因为数字校验min, max使用表单配置校验不成功, 所有兜底使用了函数校验
        if (item.value.ruleType == 5) {
          result.push({
            validator: eval(item.value.validor),
            trigger: item.value.trigger,
          });
          return;
        }
        result.push(item.value);
      }
    });
  }
  return result;
}
const rules = ref({});
function getRules(item) {
  let rule = [];
  if (item.data.required) {
    rule.push({
      required: true,
      message: "请输入" + item.data.label,
      trigger: "blur",
    });
  }
  if (typeof item.data.rule == "string") {
    rule = rule.concat(proxy.$Flex.tryParseJson(item.data.rule));
  } else {
    rule = rule.concat(getFormListRules(item.data.rule));
  }
  // 特殊的jsoneditor表单要单独处理
  if (item.data.json) {
    rule.push(...proxy.$Flex.getJsonValidate());
  }
  rules.value[item.data.fieldName] = rule;
}

template 上使用

<el-form ref="ruleForm" :model="formResult" :rules="rules"> </el-form>

最后就能转换出 element-plus 用到校验数据格式

总结

表单校验可以改善用户体验和减轻服务器的压力, 而动态配置表单校验能极大的提高动态表单的扩展性、灵活性

三种校验方案都是基于 element-plus 提供的规则, 合理利用和发掘, 对其进行封装设计, 能在程序上极大提升配置效率, 降低门槛

自定义函数校验还是有一定的缺陷, 如自定义代码有缺陷或者抛错, 外层未进行兜底等, 后期会进行解决

github 地址

预览