组件值校验，即在组件值变动时判断是否满足校验逻辑，若不满足校验逻辑，能够拿到校验错误信息进行谬误提醒或其余逻辑解决。

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

总结

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

  1. valueValidator 利用 selector 绑定任意值，这样既能够定义固定的校验规定，也能够定义追随全局状态变动的校验规定，也可定义追随以后组件实例 props 变动的校验规定。
  2. 在此基础上，还能够自定义校验规定，且反对异步校验。
  3. 更精彩的是，对值校验失败时，如何解决校验失败的体现交给了业务层。咱们再次依靠弱小的 selector 设计，将校验谬误传给 selector，就让校验谬误的用法产生了有限可能。比方用在 runtimeProps 能够让渲染响应校验谬误，用在 fetcher 能够让查问响应校验谬误。
探讨地址是：精读《组件值校验》· Issue #473 · dt-fe/weekly

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

关注 前端精读微信公众号

<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">

版权申明：自在转载-非商用-非衍生-放弃署名（创意共享 3.0 许可证）