本文详解如何在 react-querybuilder 中实现基于操作符（如 like/=）的条件校验逻辑，使校验规则随所选操作符动态生效，例如仅当使用 like 时要求值含 %，而使用 = 时禁止 %。

本文详解如何在 react-querybuilder 中实现基于操作符（如 `like`/`=`）的条件校验逻辑，使校验规则随所选操作符动态生效，例如仅当使用 `like` 时要求值含 `%`，而使用 `=` 时禁止 `%`。

在 react-querybuilder 中，字段级 validator 函数默认接收一个形如 { value, field, operator } 的对象（而非仅 value），但常见误用是直接解构为 { value }，导致丢失 operator 上下文，无法实现操作符敏感校验。正确做法是将整个校验上下文对象传入，并依据 operator 类型动态执行不同规则。

以下是一个符合需求的 phoneNumber 字段校验示例：

Ink — React for interactive command-line apps.

Ink — 用 React 开发交互式命令行应用，使用 React组件构建丰富的终端 UI。

下载

const fields = [
  {
    name: 'phoneNumber',
    label: formatMessage({ id: 'label.phoneNumber' }),
    operators: options,
    // ✅ 正确：接收完整校验上下文，可访问 operator
    validator: ({ value, operator }) => {
      if (operator === 'like' || operator === 'notLike') {
        // like/notLike 必须包含至少一个 %
        return typeof value === 'string' && value.includes('%');
      }
      if (operator === '=' || operator === '!=') {
        // =/!= 禁止出现 %
        return typeof value === 'string' && !value.includes('%');
      }
      // 其他操作符（如 in、between 等）可按需扩展或放行
      return true;
    }
  },
  {
    name: 'passportNumber',
    label: formatMessage({ id: 'label.passportNumber' }),
    operators: options,
    inputType: 'number'
  }
];

⚠️ 注意事项：

• defaultValidator 在 @react-querybuilder/antd 封装中可能不生效，因其内部未透传或覆盖了原生校验链；推荐始终使用字段级 validator 实现精准控制。
• 校验函数必须同步返回布尔值，且需处理 value 为 undefined 或非字符串的情况（如空输入），避免运行时错误。
• 若使用自定义输入组件（如 Ant Design 的 Input），确保其 value 属性与 querybuilder 保持一致，否则校验可能滞后于 UI 状态。

最后，在 组件中无需额外配置 validator 属性（即移除 validator={defaultValidator}），因为字段级校验已足够精准且优先级更高。完整集成后，用户在切换操作符时，输入框会实时触发对应校验，并通过 isValid 状态（配合 showErrorMessage 等 props）反馈提示，从而实现语义严谨、体验流畅的动态校验逻辑。