react-querybuilder按操作符配置字段验证器及defaultValidator失效问题

一、实现基于操作符的字段验证逻辑 #

针对phoneNumber字段，我们可以利用字段验证器的operator参数，根据当前使用的操作符执行不同的校验规则：

• 当操作符为like或notLike时，校验值必须包含%通配符
• 当操作符为=或!=时，校验值不能包含%通配符

修改fields数组中phoneNumber的验证器：

const fields = [
    {
        name: 'phoneNumber',
        validator: ({ operator, value }) => {
            // 校验like/notLike场景
            if (['like', 'notLike'].includes(operator)) {
                if (!value?.includes('%')) {
                    return '使用like/notLike时必须包含%通配符';
                }
            } 
            // 校验=/!=场景
            else if (['=', '!='].includes(operator)) {
                if (value?.includes('%')) {
                    return '使用=/!=时不允许包含%通配符';
                }
            }
            // 无错误时返回undefined
            return undefined;
        },
        label: formatMessage({id: 'label.phoneNumber'}),
        operators: options
    },
    {
        name: 'passportNumber',
        label: formatMessage({id: 'label.passportNumber'}),
        operators: options,
        inputType: 'number'
    },
];

二、修复defaultValidator不生效的问题 #

你错误地将原始QueryBuilder嵌套在QueryBuilderAntD内部，导致配置的validator无法被AntD封装组件识别。正确用法是直接使用QueryBuilderAntD作为构建器组件，将所有props直接传递给它：

替换原来的嵌套写法：

// 修改后的正确写法
<QueryBuilderAntD
    fields={fields}
    query={query}
    onQueryChange={q => setQuery(q)}
    validator={defaultValidator}
/>

QueryBuilderAntD是官方针对Ant Design封装的完整组件，内部已经集成了原始QueryBuilder的功能，直接传递props就能让defaultValidator正常生效。

内容的提问来源于stack exchange，提问作者Sena