Knockout-Validation如何仅校验指定子集合并正常显示子项验证消息
核心问题原因
当ko.validation.group采用“传入指定可观测值数组限定校验范围”的形式时,若未显式开启深层遍历配置,校验组只会收集数组顶层元素的校验错误,不会自动向下递归遍历observableArray中嵌套的子对象、子属性的校验规则,这就是修改配置后子集合验证消息消失的根本原因。
之前传入整个viewModel对象并配置{deep: true}时,校验组会自动递归穿透所有嵌套层级的可观测属性,因此子集合的校验可以正常触发;但换成数组入参形式时,遗漏了对应的深层配置参数,导致递归遍历逻辑没有生效。
正确配置方式
在传入指定校验范围的可观测数组时,将deep: true作为第二个参数传入配置项,即可实现“仅校验指定子集合、同时正常显示子集合内子项验证消息”的目标:
// 替换原有校验组配置 viewModel.errors = ko.validation.group( // 仅将需要参与校验的可观测对象列入数组,未列入的对象完全不参与校验流程 [viewModel.lastName, viewModel.items], // 显式开启深层递归遍历,自动收集数组内嵌套子项的校验错误 { deep: true } );
配置生效后的表现
- 校验范围严格可控:只有数组中明确列出的可观测值会被纳入校验,比如示例中的
lastName、items集合;firstName、emailAddress、age、items2等未列入数组的可观测值不会参与校验,也不会弹出对应的错误提示 - 子集合校验完全正常:开启深层配置后,校验组会自动穿透
items这个observableArray,遍历数组中每一个Item实例上所有带校验规则的可观测属性(id、name),正常收集错误并渲染对应的验证消息 - 无需调整Item类内部代码:原有写在Item类里的
ko.validation.group(self, { live: true })可以保留,和外层校验组的运行逻辑互不干扰
操作注意点
- 后续若需要新增纳入校验的可观测值,直接将其追加到第一个参数的数组中即可
- 若存在多层嵌套的带校验规则的对象,开启
deep: true后不需要逐层手动创建校验组,校验组会自动完成递归遍历和错误收集
内容的提问来源于stack exchange,提问作者KRob
相关产品推荐
相关产品推荐

