元件值校驗,即在元件值變化時判斷是否滿足校驗邏輯,若不滿足校驗邏輯,可以拿到校驗錯誤資訊進行錯誤提示或其他邏輯處理。
宣告 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
如果你想參與討論,請 點選這裡,每週都有新的主題,週末或週一釋出。前端精讀 - 幫你篩選靠譜的內容。
關注 前端精讀微信公眾號
<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
版權宣告:自由轉載-非商用-非衍生-保持署名(創意共享 3.0 許可證)