关于javascript:可视化搭建-组件值校验

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

申明 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 许可证）