本文详解如何在 react-querybuilder 中实现基于操作符（如 like/=）的条件校验逻辑，使校验规则随所选操作符动态生效，例如仅当使用 like 时要求值含 %，而使用 = 时禁止 %。
本文详解如何在 react-querybuilder 中实现基于操作符（如 `like`/`=`）的条件校验逻辑，使校验规则随所选操作符动态生效，例如仅当使用 `like` 时要求值含 `%`，而使用 `=` 时禁止 `%`。
在 react-querybuilder 中，字段级 validator 函数默认接收一个形如 { value, field, operator } 的对象（而非仅 value），但常见误用是直接解构为 { value }，导致丢失 operator 上下文，无法实现操作符敏感校验。正确做法是将整个校验上下文对象传入，并依据 operator 类型动态执行不同规则。
以下是一个符合需求的 phoneNumber 字段校验示例：
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 状态。
最后，在 <QueryBuilder> 组件中无需额外配置 validator 属性（即移除 validator={defaultValidator}），因为字段级校验已足够精准且优先级更高。完整集成后，用户在切换操作符时，输入框会实时触发对应校验，并通过 isValid 状态（配合 showErrorMessage 等 props）反馈提示，从而实现语义严谨、体验流畅的动态校验逻辑。
