组件值验证，即组件值变化时判断是否满足验证逻辑。如果验证逻辑不满足，可以获取验证错误信息进行错误提示或其他逻辑处理。声明valueValidator以启用值验证：import{ComponentMeta}from"designer";constinput:ComponentMeta={componentName:"input",element:Input,valueValidator:()=>({required:true,maximum:10,}),};如上例，相当于将组件的取值限制为“不能undefined，最大值为10”。JSONSchemavalidate的所有验证规则都可以内置为内置规则。支持扩展自定义验证规则。支持异步验证。Selector可以用来绑定任意变量（比如全局状态state或者当前组件实例的props来灵活定义组件值校验规则）。当出现验证错误时，框架不会做任何事情，而是将错误抛给业务，由业务来判断如何处理错误。接下来，我们详细描述每个功能。错误处理定义组件值校验后，当校验出错时，可以通过selector的validateError获取错误信息：constinput:ComponentMeta={componentName:"input",element:Input,valueValidator:()=>({required:true,maximum:10,}),runtimeProps:({selector})=>({errorName:selector(({validateError})=>validateError.ruleName),errorMessage:选择器(({validateError})=>validateError.payload),}),};ruleName:验证规则名称。payload：没有命中规则时的返回值，验证函数返回的是什么，这里获取的是什么。内置验证函数返回错误消息的文本。获取到验证错误后，通过runtimeProps传递给组件，我们可以通过组件本身或element添加一个统一的组件React容器层来处理和展示这些错误信息。您也可以使用fetcher接收此错误并调整fetch参数。总之，所有支持选择器的地方都可以响应验证错误，如何使用完全由你决定。自定义验证规则createDesigner传递的中间件可以扩展自定义验证规则：import{createMiddleware}from"designer";constmyMiddleware=createMiddleware({validateRules:{//自定义验证规则，判断是否为空字符串isEmptyString:(value,options?:{errorMessage?:string})=>{if(value===""){returntrue;}returnoptions.errorMessage;},},});通过validateRules定义自定义校准，检查规则后，可以在valueValidator中使用：为空",},}),};使用选择器绑定验证规则使用选择器将验证规则绑定到任何状态，例如：)=>props.validator),};上面的示例将名为input的组件的所有验证规则绑定到当前组件实例的props.validator。constinput:ComponentMeta={componentName:"input",element:Input,valueValidator:({selector})=>selector(({state})=>state.validatorInfo),};在上面的例子中，将所有命名为输入组件的验证规则绑定到全局状态state.validatorInfo。异步验证定义自定义验证函数为异步函数，然后定义异步验证即可。constmyMiddleware=createMiddleware({validateRules:{isEmptyString:async(value,options?:{errorMessage?:string})=>{awaitwait(1000);if(value===""){returntrue;}返回选项。错误信息;}，}，}）;如上所示，定义了isEmptyString的错误校验规则，那么在执行校验函数时，会在1s后出现校验信息。综上所述，组件值验证仍然提供了强大的灵活性和可扩展性。下面的自定义能力是相互正交的，灵活性加倍：valueValidator使用选择器绑定任意值，这样你可以定义固定的验证规则或者定义跟随全局状态变化的验证规则，也可以定义跟随全局状态变化的验证规则跟随当前组件实例的道具变化。在此基础上，还可以自定义验证规则，支持异步验证。更精彩的是，当值验证失败时，如何处理验证失败的问题交给了业务层。我们再次依托强大的选择器设计，将校验错误传递给选择器，让校验错误的使用有了无限可能。例如，它可以用在runtimeProps中让渲染响应验证错误，用在fetcher中让查询响应验证错误。讨论地址为：Jingdu《组件值校验》·Issue#473·dt-fe/weekly想参与讨论的请戳这里，每周都有新话题，周末或周一发布。前端精读——帮你过滤靠谱的内容。关注前端精读微信公众号
