开源表单设计器vue-form-design自动化校验实现原理

未命名.gif

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

目标

👌，首先我们简要说下要实现的目标功能：

具有基础的表单验证功能
提供一些内置验证规则
提供对外开放的能力

这样就能直接通过配置的形式无代码来表单校验

背景

开源库 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 校验规则进行总结, 归纳出所有组合类型, 通过表单配置的形式选择

企业微信截图_5f558adb-7b07-4ef1-bcd5-63d6e1e072cb.png

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

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

自定义校验函数

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

企业微信截图_0eaa5d09-a226-4cd1-bac7-163c661f9180.png

上图可知, 包括两个配置

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

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

使用场景如:

企业微信截图_1e2b9915-b9d1-49d9-8772-a9e091446935.png

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

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

则配置自定义函数

企业微信截图_d74be027-1e9d-468d-8767-c3e0adecf0ad.png
这样就使用到了第四个参数, 即拿到当前表单列表页数据{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 保持一致, 我们可以使用以上三个方法动态遍历设置校验规则

运用

企业微信截图_85ec9275-fffc-4e38-9b32-63669c634aa8.png

如图, 在 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 地址

预览