正文

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

聲明 valueValidator 可開啟值校驗：

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

如上面的例子，相當(dāng)于對組件值做了 “不能為 undefined 且最大值為 10” 的限制。

• 可以內(nèi)置 JSONSchema validate 的全部校驗規(guī)則作為內(nèi)置規(guī)則。
• 支持拓展自定義校驗規(guī)則。
• 支持異步校驗。
• 可以用 selector 綁定任意變量（如全局狀態(tài) state 或者當(dāng)前組件實例的 props 來靈活定義組件值校驗規(guī)則）。

當(dāng)校驗出錯時，框架也不會做任何處理，而是將錯誤拋給業(yè)務(wù)，由業(yè)務(wù)來判斷如何處理錯誤。

接下來我們來詳細(xì)說說每一項特征。

錯誤處理

定義了組件值校驗后，當(dāng)校驗錯誤出現(xiàn)時，可以通過 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: 校驗規(guī)則名稱。
• payload: 該規(guī)則未命中時的返回值，校驗函數(shù)返回什么，這里拿到的就是什么。內(nèi)置的校驗函數(shù)返回的是錯誤信息文案。

拿到校驗錯誤后，通過 runtimeProps 傳給組件，我們可通過組件自身或 element 增加統(tǒng)一的組件 React 容器層處理并展示這些錯誤信息。

也可以使用 fetcher 接收這個錯誤，并調(diào)整取數(shù)參數(shù)。總之支持 selector 的地方都可以響應(yīng)校驗錯誤，如何使用完全由你決定。

自定義校驗規(guī)則

createDesigner 傳遞的中間件可以拓展自定義校驗規(guī)則：

import { createMiddleware } from "designer";
const myMiddleware = createMiddleware({
  validateRules: {
    // 自定義校驗規(guī)則，判斷是否為空字符串
    isEmptyString: (value, options?: { errorMessage?: string }) => {
      if (value === "") {
        return true;
      }
      return options.errorMessage;
    },
  },
});

通過 validateRules 定義自定義校驗規(guī)則后，就可以在 valueValidator 中使用了：

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

用 selector 綁定校驗規(guī)則

利用 selector 將校驗規(guī)則綁定到任意狀態(tài)，比如：

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

上面的例子，將所有組件名為 input 組件的校驗規(guī)則綁定到當(dāng)前組件實例的 props.validator 上。

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

上面的例子，將所有組件名為 input 組件的校驗規(guī)則綁定綁定到全局狀態(tài) state.validatorInfo 上。

異步校驗

將自定義校驗函數(shù)定義為異步函數(shù)，就可以定義異步校驗。

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

如上所示，定義了 isEmptyString 的錯誤校驗規(guī)則，那么當(dāng)校驗函數(shù)執(zhí)行完后，在 1s 后將會出現(xiàn)校驗信息。

總結(jié)

組件值校驗依然提供了強大的靈活拓展性，以下幾種定制能力相互正交，將靈活性成倍放大：

• valueValidator 利用 selector 綁定任意值，這樣既可以定義固定的校驗規(guī)則，也可以定義跟隨全局狀態(tài)變化的校驗規(guī)則，也可定義跟隨當(dāng)前組件實例 props 變化的校驗規(guī)則。
• 在此基礎(chǔ)上，還可以自定義校驗規(guī)則，且支持異步校驗。
• 更精彩的是，對值校驗失敗時，如何處理校驗失敗的表現(xiàn)交給了業(yè)務(wù)層。我們再次依托強大的 selector 設(shè)計，將校驗錯誤傳給 selector，就讓校驗錯誤的用法產(chǎn)生了無限可能。比如用在 runtimeProps 可以讓渲染響應(yīng)校驗錯誤，用在 fetcher 可以讓查詢響應(yīng)校驗錯誤。

討論地址是：精讀《組件值校驗》· Issue #473 · dt-fe/weekly

以上就是前端可視化搭建組件值校驗規(guī)則詳解的詳細(xì)內(nèi)容，更多關(guān)于前端可視化組件值校驗的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論