前端可視化搭建組件值校驗(yàn)規(guī)則詳解
正文
組件值校驗(yàn),即在組件值變化時(shí)判斷是否滿足校驗(yàn)邏輯,若不滿足校驗(yàn)邏輯,可以拿到校驗(yàn)錯(cuò)誤信息進(jìn)行錯(cuò)誤提示或其他邏輯處理。
聲明 valueValidator
可開啟值校驗(yàn):
import { ComponentMeta } from "designer"; const input: ComponentMeta = { componentName: "input", element: Input, valueValidator: () => ({ required: true, maximum: 10, }), };
如上面的例子,相當(dāng)于對組件值做了 “不能為 undefined
且最大值為 10” 的限制。
- 可以內(nèi)置 JSONSchema validate 的全部校驗(yàn)規(guī)則作為內(nèi)置規(guī)則。
- 支持拓展自定義校驗(yàn)規(guī)則。
- 支持異步校驗(yàn)。
- 可以用 selector 綁定任意變量(如全局狀態(tài)
state
或者當(dāng)前組件實(shí)例的props
來靈活定義組件值校驗(yàn)規(guī)則)。
當(dāng)校驗(yàn)出錯(cuò)時(shí),框架也不會(huì)做任何處理,而是將錯(cuò)誤拋給業(yè)務(wù),由業(yè)務(wù)來判斷如何處理錯(cuò)誤。
接下來我們來詳細(xì)說說每一項(xiàng)特征。
錯(cuò)誤處理
定義了組件值校驗(yàn)后,當(dāng)校驗(yàn)錯(cuò)誤出現(xiàn)時(shí),可以通過 selector
的 validateError
拿到錯(cuò)誤信息:
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
: 校驗(yàn)規(guī)則名稱。payload
: 該規(guī)則未命中時(shí)的返回值,校驗(yàn)函數(shù)返回什么,這里拿到的就是什么。內(nèi)置的校驗(yàn)函數(shù)返回的是錯(cuò)誤信息文案。
拿到校驗(yàn)錯(cuò)誤后,通過 runtimeProps
傳給組件,我們可通過組件自身或 element
增加統(tǒng)一的組件 React 容器層處理并展示這些錯(cuò)誤信息。
也可以使用 fetcher
接收這個(gè)錯(cuò)誤,并調(diào)整取數(shù)參數(shù)??傊С?selector
的地方都可以響應(yīng)校驗(yàn)錯(cuò)誤,如何使用完全由你決定。
自定義校驗(yàn)規(guī)則
createDesigner
傳遞的中間件可以拓展自定義校驗(yàn)規(guī)則:
import { createMiddleware } from "designer"; const myMiddleware = createMiddleware({ validateRules: { // 自定義校驗(yàn)規(guī)則,判斷是否為空字符串 isEmptyString: (value, options?: { errorMessage?: string }) => { if (value === "") { return true; } return options.errorMessage; }, }, });
通過 validateRules
定義自定義校驗(yàn)規(guī)則后,就可以在 valueValidator
中使用了:
const input: ComponentMeta = { componentName: "input", element: Input, valueValidator: () => ({ isEmptyString: { errorMessage: "字符串必須為空", }, }), };
用 selector 綁定校驗(yàn)規(guī)則
利用 selector
將校驗(yàn)規(guī)則綁定到任意狀態(tài),比如:
const input: ComponentMeta = { componentName: "input", element: Input, valueValidator: ({ selector }) => selector(({ props }) => props.validator), };
上面的例子,將所有組件名為 input
組件的校驗(yàn)規(guī)則綁定到當(dāng)前組件實(shí)例的 props.validator
上。
const input: ComponentMeta = { componentName: "input", element: Input, valueValidator: ({ selector }) => selector(({ state }) => state.validatorInfo), };
上面的例子,將所有組件名為 input
組件的校驗(yàn)規(guī)則綁定綁定到全局狀態(tài) state.validatorInfo
上。
異步校驗(yàn)
將自定義校驗(yàn)函數(shù)定義為異步函數(shù),就可以定義異步校驗(yàn)。
const myMiddleware = createMiddleware({ validateRules: { isEmptyString: async (value, options?: { errorMessage?: string }) => { await wait(1000); if (value === "") { return true; } return options.errorMessage; }, }, });
如上所示,定義了 isEmptyString
的錯(cuò)誤校驗(yàn)規(guī)則,那么當(dāng)校驗(yàn)函數(shù)執(zhí)行完后,在 1s 后將會(huì)出現(xiàn)校驗(yàn)信息。
總結(jié)
組件值校驗(yàn)依然提供了強(qiáng)大的靈活拓展性,以下幾種定制能力相互正交,將靈活性成倍放大:
valueValidator
利用selector
綁定任意值,這樣既可以定義固定的校驗(yàn)規(guī)則,也可以定義跟隨全局狀態(tài)變化的校驗(yàn)規(guī)則,也可定義跟隨當(dāng)前組件實(shí)例 props 變化的校驗(yàn)規(guī)則。- 在此基礎(chǔ)上,還可以自定義校驗(yàn)規(guī)則,且支持異步校驗(yàn)。
- 更精彩的是,對值校驗(yàn)失敗時(shí),如何處理校驗(yàn)失敗的表現(xiàn)交給了業(yè)務(wù)層。我們再次依托強(qiáng)大的
selector
設(shè)計(jì),將校驗(yàn)錯(cuò)誤傳給selector
,就讓校驗(yàn)錯(cuò)誤的用法產(chǎn)生了無限可能。比如用在runtimeProps
可以讓渲染響應(yīng)校驗(yàn)錯(cuò)誤,用在fetcher
可以讓查詢響應(yīng)校驗(yàn)錯(cuò)誤。
討論地址是:精讀《組件值校驗(yàn)》· Issue #473 · dt-fe/weekly
以上就是前端可視化搭建組件值校驗(yàn)規(guī)則詳解的詳細(xì)內(nèi)容,更多關(guān)于前端可視化組件值校驗(yàn)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序 定位到當(dāng)前城市實(shí)現(xiàn)實(shí)例代碼
這篇文章主要介紹了微信小程序 定位到當(dāng)前城市實(shí)現(xiàn)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02小程序開發(fā)實(shí)戰(zhàn):實(shí)現(xiàn)九宮格界面的導(dǎo)航的代碼實(shí)現(xiàn)
本篇文章主要介紹了小程序開發(fā)實(shí)戰(zhàn):實(shí)現(xiàn)九宮格界面的導(dǎo)航的代碼實(shí)現(xiàn),具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01