本文聚焦一个常见开发痛点：在 react-querybuilder 中，如何实现表单验证器根据所选操作符（如“like”或“等于”）动态调整校验规则。例如，当用户选择 like 操作符时，必须强制输入内容包含 % 通配符；若切换为等号，则 % 不应出现。解决方案并不复杂，核心要点是：编写验证函数时，不仅要获取 value，更要获取完整的规则对象，从而实现对操作符的条件判断。
在实际业务场景中，表单验证往往需要应对多种条件组合，而非简单的“非黑即白”。以 react-querybuilder 为例，若某个字段允许用户选择“like”或“notLike”这类模糊匹配操作符，其值通常需要携带 % 通配符。然而，当用户切换为普通的“等于（=）”操作符后，再出现 % 就不符合业务逻辑，甚至可能引发 SQL 层面的语法错误或语义混淆。那么，如何让校验逻辑能够“跟随”操作符动态变化？
具体到 react-querybuilder 这个库，默认情况下，字段级别的 validator 只接收解构后的 { value }，开发者无法获知用户当前选择了哪个操作符。这就导致了一个尴尬的局面：你想做条件校验，却拿不到判断条件本身。因此，关键一步在于放弃这种解构写法，改为接收完整的规则对象，这样就能自由访问 operator、value、field 等上下文信息，实现真正的动态验证。
✅ 正确的 validator 写法（支持操作符判断）
将 validator 定义为一个接收单个 rule 参数的函数，而非解构后的 { value }。这样一来，在函数体内就能同时获取操作符和值，从而编写分支校验逻辑：
const fields = [ { name: 'phoneNumber', label: formatMessage({ id: 'label.phoneNumber' }), operators: options, // ✅ 推荐写法：接收完整 rule 对象，可读取 operator 与 value validator: (rule) => { const { value, operator } = rule; // 针对 like / notLike 操作符，要求值必须以 % 开头（或包含 % 且符合 SQL LIKE 语义） if (['like', 'notLike'].includes(operator)) { if (!value || !value.trim().startsWith('%')) { return 'LIKE 操作符要求值必须以 "%" 开头'; } } // 针对 = / != 等操作符，禁止出现 % 通配符 if (['=', '!='].includes(operator)) { if (value && value.includes('%')) { return '等值操作符不允许使用 "%" 通配符'; } } return true; // 验证通过 } }, { name: 'passportNumber', label: formatMessage({ id: 'label.passportNumber' }), operators: options, inputType: 'number' }];
⚠️ 注意事项与常见误区
defaultValidator 为何不生效？
需要明确的是：defaultValidator是 react-querybuilder 内置的全局校验机制，它仅负责检查规则结构的“合法性”（如空规则、嵌套结构是否合理）。它不会接管你在字段定义中编写的业务校验逻辑。因此，你无需也不应将defaultValidator传给field.validator是完全独立的两个概念，且@react-querybuilder/antd这类封装层也无法覆盖该全局配置。最简洁的做法是：直接移除validator={defaultValidator}，避免不必要的干扰。Ant Design 封装不影响 validator 机制
使用正则建议升级为更健壮的匹配方式
有些开发者倾向于使用^(%)[0-9]*$这类正则，结果发现'%123%'或'123%'均无法通过校验。原因在于正则过于严格，仅允许 % 后跟纯数字。实际上，LIKE 操作符的常见值格式为'%123%'或'123%'。更推荐的做法是采用语义化校验，仅检查值中是否包含%，既灵活又不会遗漏真实的通配符场景：if (['like', 'notLike'].includes(operator)) { if (!value || !/%/.test(value)) { return 'LIKE 操作符的值必须包含 "%" 通配符'; }}
✅ 最终集成要点
- 移除
validator属性； - 在
fields数组中，为需要条件校验的字段定义validator: (rule) => {...}； - 在函数内安全访问
rule.operator、rule.value、rule.field，并编写分支校验逻辑； - 确保
QueryBuilderAntD作为外层 Provider 正常包裹
如此一来，phoneNumber 字段便能智能响应操作符变化：选择 like 时，强制要求 % 通配符；切换回等于时，自动将包含 % 的值判定为非法。这才算实现了真正动态、上下文感知的表单验证，让校验逻辑与操作符选择保持同步。
