可视化搭建 - 组件值校验

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

声明 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 后将会出现校验信息。

总结

组件值校验依然提供了强大的灵活拓展性，以下几种定制能力相互正交，将灵活性成倍放大：

valueValidator 利用 selector 绑定任意值，这样既可以定义固定的校验规则，也可以定义跟随全局状态变化的校验规则，也可定义跟随当前组件实例 props 变化的校验规则。
在此基础上，还可以自定义校验规则，且支持异步校验。
更精彩的是，对值校验失败时，如何处理校验失败的表现交给了业务层。我们再次依托强大的 selector 设计，将校验错误传给 selector，就让校验错误的用法产生了无限可能。比如用在 runtimeProps 可以让渲染响应校验错误，用在 fetcher 可以让查询响应校验错误。

讨论地址是：精读《组件值校验》· Issue #473 · dt-fe/weekly

如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）