前端可视化搭建组件值校验规则详解，有哪些细节需要注意？

本文共计1359个文字，预计阅读时间需要6分钟。

目录+ 正文字符处理+ 错误处理+ 自定义校验规则+ 使用selector绑定校验规则+ 异步校验+ 总结+ 正文字符校验+ 组件值校验

目录

• 正文
• 错误处理
• 自定义校验规则
• 用 selector 绑定校验规则
• 异步校验
• 总结

正文

组件值校验，即在组件值变化时判断是否满足校验逻辑，若不满足校验逻辑，可以拿到校验错误信息进行错误提示或其他逻辑处理。

声明 valueValidator 可开启值校验：

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

如上面的例子，相当于对组件值做了 “不能为 undefined 且最大值为 10” 的限制。

• 可以内置 JSONSchema validate 的全部校验规则作为内置规则。
• 支持拓展自定义校验规则。
• 支持异步校验。
• 可以用 selector 绑定任意变量（如全局状态 state 或者当前组件实例的 props 来灵活定义组件值校验规则）。