本文讲解如何在 react-querybuilder 中实现基于操作符（如 like/notLike）的条件验证逻辑，使验证规则仅在特定操作符下生效，例如要求 like 操作符的值必须包含 % 通配符，而 = 操作符则禁止使用 %。
本文讲解如何在 react-querybuilder 中实现基于操作符（如 like/notlike）的条件验证逻辑，使验证规则仅在特定操作符下生效，例如要求 `like` 操作符的值必须包含 `%` 通配符，而 `=` 操作符则禁止使用 `%`。
在 react-querybuilder 中，字段级 validator 函数默认接收的是 { value, field, operator } 对象（而非仅 value），但常见误区是错误解构导致丢失 operator 上下文。正确做法是将 validator 定义为接收完整 rule 对象的函数，从而根据当前操作符动态执行差异化校验。
以下是适配您代码的修正方案：
react-best-practices
下载
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
✅ 正确的字段验证器写法
const fields = [
{
name: 'phoneNumber',
label: formatMessage({ id: 'label.phoneNumber' }),
operators: options,
// ✅ 关键：validator 接收完整 rule 对象，可访问 operator、value 等
validator: ({ value, operator }) => {
if (operator === 'like' || operator === 'notLike') {
// like/notLike 必须包含至少一个 %
return value && typeof value === 'string' && value.includes('%');
}
if (operator === '=' || operator === '!=') {
// =/!= 禁止使用 %
return value && typeof value === 'string' && !value.includes('%');
}
// 其他操作符（如未定义）可放行或按需处理
return true;
}
},
{
name: 'passportNumber',
label: formatMessage({ id: 'label.passportNumber' }),
operators: options,
inputType: 'number'
}
];⚠️ 注意事项
- 不要解构 validator: ({ value }) => ... —— 这会丢失 operator 字段，导致无法做条件判断；
- defaultValidator 在 @react-querybuilder/antd 封装中可能被覆盖或未透传，因此建议直接在 fields 中定义 validator，而非依赖全局 validator 属性；
- validator 返回 true 表示有效，false 或 string（错误提示）表示无效；返回字符串时，react-querybuilder 会自动显示该提示；
- 若需自定义错误提示，可返回如 'LIKE 值必须包含 %'，框架将渲染为 tooltip 或表单反馈。
? 验证效果示例
| 操作符 | 合法值 | 非法值 | 原因 |
|---|---|---|---|
| like | %123, 123% | 123, %%abc | 必须含 %（且允许前后） |
| = | 1234567890 | %123, 123% | 禁止任何 % |
? 补充建议
- 可结合 inputType="text" 和 placeholder="%xxx%" 提升用户体验；
- 如需更严格匹配（如仅允许前缀/后缀 %），正则可优化为 /^%.*$|^.*%$/；
- 若使用 QueryBuilderAntD，确保其版本与 react-querybuilder 兼容（推荐 v7+）。
通过上述方式，即可实现“操作符驱动”的精细化验证，既满足业务语义（SQL-like 语义约束），又保持 UI 响应及时、反馈明确。
