視覺化搭建 - 元件值校驗

黃子毅發表於2023-03-13

元件值校驗,即在元件值變化時判斷是否滿足校驗邏輯,若不滿足校驗邏輯,可以拿到校驗錯誤資訊進行錯誤提示或其他邏輯處理。

宣告 valueValidator 可開啟值校驗:

import { ComponentMeta } from "designer";

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

如上面的例子,相當於對元件值做了 “不能為 undefined 且最大值為 10” 的限制。

  • 可以內建 JSONSchema validate 的全部校驗規則作為內建規則。
  • 支援擴充自定義校驗規則。
  • 支援非同步校驗。
  • 可以用 selector 繫結任意變數(如全域性狀態 state 或者當前元件例項的 props 來靈活定義元件值校驗規則)。

當校驗出錯時,框架也不會做任何處理,而是將錯誤拋給業務,由業務來判斷如何處理錯誤。

接下來我們來詳細說說每一項特徵。

錯誤處理

定義了元件值校驗後,當校驗錯誤出現時,可以透過 selectorvalidateError 拿到錯誤資訊:

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 許可證

相關文章