前端可视化搭建组件值校验规则详解

组件值校验，即在组件值变化时判断是否满足校验逻辑，若不满足校验逻辑，可以拿到校验错误信息进行错误提示或其他逻辑处理。

声明 valueValidator 可开启值校验：

import { ComponentMeta } from "designer";
const input: ComponentMeta = {
 componentName: "input",
 element: Input,
 valueValidator: () => ({
   required: true,
   maximum: 10,
 }),
};

如上面的例子，相当于对组件值做了 “不能为 undefined 且最大值为 10” 的限制。

• 可以内置 JSONSchema validate 的全部校验规则作为内置规则。

• 支持拓展自定义校验规则。

• 支持异步校验。

• 可以用 selector 绑定任意变量（如全局状态 state 或者当前组件实例的 props 来灵活定义组件值校验规则）。

当校验出错时，框架也不会做任何处理，而是将错误抛给业务，由业务来判断如何处理错误。

接下来我们来详细说说每一项特征。

错误处理

定义了组件值校验后，当校验错误出现时，可以通过 selector 的 validateError 拿到错误信息:

const input: ComponentMeta = {
 componentName: "input",
 element: Input,
 valueValidator: () => ({
   required: true,
   maximum: 10,
 }),
 runtimeProps: ({ selector }) => ({
   errorName: selector(({ validateError }) => validateError.ruleName),
   errorMessage: selector(({ validateError }) => validateError.payload),
 }),
};

• ruleName: 校验规则名称。

• payload: 该规则未命中时的返回值，校验函数返回什么，这里拿到的就是什么。内置的校验函数返回的是错误信息文案。

拿到校验错误后，通过 runtimeProps 传给组件，我们可通过组件自身或 element 增加统一的组件 React 容器层处理并展示这些错误信息。

也可以使用 fetcher 接收这个错误，并调整取数参数。总之支持 selector 的地方都可以响应校验错误，如何使用完全由你决定。

自定义校验规则

createDesigner 传递的中间件可以拓展自定义校验规则：

import { createMiddleware } from "designer";
const myMiddleware = createMiddleware({
 validateRules: {
   // 自定义校验规则，判断是否为空字符串
   isEmptyString: (value, options?: { errorMessage?: string }) => {
     if (value === "") {
       return true;
     }
     return options.errorMessage;
   },
 },
});

通过 validateRules 定义自定义校验规则后，就可以在 valueValidator 中使用了：

const input: ComponentMeta = {
 componentName: "input",
 element: Input,
 valueValidator: () => ({
   isEmptyString: {
     errorMessage: "字符串必须为空",
   },
 }),
};

用 selector 绑定校验规则

利用 selector 将校验规则绑定到任意状态，比如：

const input: ComponentMeta = {
 componentName: "input",
 element: Input,
 valueValidator: ({ selector }) => selector(({ props }) => props.validator),
};

上面的例子，将所有组件名为 input 组件的校验规则绑定到当前组件实例的 props.validator 上。

const input: ComponentMeta = {
 componentName: "input",
 element: Input,
 valueValidator: ({ selector }) =>
   selector(({ state }) => state.validatorInfo),
};

上面的例子，将所有组件名为 input 组件的校验规则绑定绑定到全局状态 state.validatorInfo 上。

异步校验

将自定义校验函数定义为异步函数，就可以定义异步校验。

const myMiddleware = createMiddleware({
 validateRules: {
   isEmptyString: async (value, options?: { errorMessage?: string }) => {
     await wait(1000);
     if (value === "") {
       return true;
     }
     return options.errorMessage;
   },
 },
});

如上所示，定义了 isEmptyString 的错误校验规则，那么当校验函数执行完后，在 1s 后将会出现校验信息。

来源：https://juejin.cn/post/7209653045310341180