如何依据 React Query Builder 中的操作符动态启用字段验证器

本文介绍在 react-querybuilder 中实现操作符依赖型验证的正确方法：通过 validator 函数接收完整规则对象（含 operator 字段），从而针对 like/notLike 等操作符对输入值（如 % 符号）进行条件校验，避免误触发或失效问题。

本文介绍在 react-querybuilder 中实现操作符依赖型验证的正确方法：通过 validator 函数接收完整规则对象（含 operator 字段），从而针对 like/notlike 等操作符对输入值（如 `%` 符号）进行条件校验，避免误触发或失效问题。

在 react-querybuilder 中，字段级 validator 默认仅接收 { value } 解构参数，导致无法感知当前所选操作符（如 like 或 =），因而难以实现“仅当使用 like 时才要求 % 前缀”这类业务逻辑。关键在于放弃解构传参，改用接收完整规则对象的方式，从而访问 operator、field 和 value 等上下文信息。

✅ 正确的 validator 写法（支持操作符判断）

将 validator 定义为接收单个参数 rule（即当前规则对象），而非解构后的 { value }：

const fields = [  {    name: 'phoneNumber',    label: formatMessage({ id: 'label.phoneNumber' }),    operators: options,    // ✅ 正确：接收完整 rule 对象，可读取 operator    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 内置的通用验证器，但它仅作用于全局层面（如空规则、嵌套结构合法性），不接管字段级自定义逻辑。你无需也不应将其传给 <QueryBuilder validator={defaultValidator}> —— 它与 field.validator 无关联，且 @react-querybuilder/antd 封装层不会覆盖或增强该行为。删除 validator={defaultValidator} 即可避免混淆。

• Ant Design 封装不影响 validator 机制
  使用 <QueryBuilderAntD> 仅替换 UI 组件（如选择器、输入框样式），所有核心逻辑（包括 validator 执行时机与参数）仍由 react-querybuilder 原生控制。因此，上述 rule 参数方案在 AntD 版本中完全适用。

• 正则建议升级为更健壮匹配
  原示例 ^(%)[0-9]*$ 过于严格（仅允许 % 后接纯数字）。实际 LIKE 值常为 '%123%' 或 '123%'。推荐使用语义化校验：

  if (['like', 'notLike'].includes(operator)) {  if (!value || !/%/.test(value)) {    return 'LIKE 操作符的值必须包含 "%" 通配符';  }}

✅ 最终集成要点

1. 移除 <QueryBuilder validator={defaultValidator}> 中的 validator 属性；
2. 在 fields 数组中为需条件验证的字段定义 validator: (rule) => {...}；
3. 在 rule 对象中安全访问 operator、value、field，实现分支逻辑；
4. 确保 QueryBuilderAntD 作为外层 Provider 正确包裹 <QueryBuilder>（你已正确使用）。

通过此方式，phoneNumber 字段将智能响应操作符变更：切换为 like 时强制校验 %；切换为 = 时自动拦截非法通配符，真正实现动态、上下文感知的表单验证。