前端可视化搭建组件值校验规则详解
正文
组件值校验，即在组件值变化时判断是否满足校验逻辑，若不满足校验逻辑，可以拿到校验错误信息进行错误提示或其他逻辑处理。
声明 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
以上就是前端可视化搭建组件值校验规则详解的详细内容，更多关于前端可视化组件值校验的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了微信小程序之蓝牙的链接的相关资料,希望通过本文大家能够掌握小程序蓝牙的开发方法，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了基于JavaScript阻止事件冒泡,事件冒泡 开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。更多详细内容请需要的小伙伴参考下面文章的具体内容希望对你有所帮助2021-12-12
这篇文章主要介绍了微信小程序 开发经验整理的相关资料,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了微信小程序 定位到当前城市实现实例代码的相关资料,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了JS深入浅出Function与构造函数，Function是一个构造函数，可以通过该构造函数去创建一个函数，创建的函数是一个Function对象，具体内容请参考下面文章的详细内容,需要的朋友可以参考一下2021-12-12
这篇文章主要为大家介绍了JS前端面试手写apply和bind实例的轻松实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了微信小程序 progress组件详解及实例代码的相关资料,需要的朋友可以参考下2016-10-10
本篇文章主要介绍了小程序开发实战：实现九宫格界面的导航的代码实现，具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
本文主要介绍Google 地图控件集,这里帮大家整理了关于Google地图控件集的基础知识,详细介绍了控件的功能，并附示例代码，有需要的小伙伴可以参考下2016-08-08
这篇文章主要介绍了利用JS创建一个录屏功能，创建这个功能钱我们首先创建一个HTML文件，包含记录按钮和一个播放标签，下面来看看创建的详细过程2021-11-11
最新评论