Vue3中如何向自定义Vuelidate校验规则传递多参数？

问题场景 #

我有price和max_price两个字段，要求修改price时触发lessThanMaxPrice校验规则。内联校验函数能正常运行，但将校验逻辑提取到ValidationHelpers静态类后，调用时出现TypeScript错误：

Argument of type 'boolean' is not assignable to parameter of type 'ValidationRule<unknown>'.ts(2345)

正常运行的内联代码 #

<script setup lang="ts">
const lessThanMaxPrice = (price: number) => {
    const maxPrice = editItemForm.max_price;

    let isValid = true;

    if (price || maxPrice) {
        if (!maxPrice) {
            isValid = false;
        } else if (price && price >= maxPrice) {
            isValid = false;
        }
    }

    return isValid;
};

const editItemRules = computed(() => {
    return {
        price: {
            lessThanMaxPrice: helpers.withMessage(t('validation_errors.price_error'), lessThanMaxPrice),
        },
   }
});

const editItemForm = reactive({
    price: null as number|null,
    max_price: null as number|null
});

const editItemV$ = useVuelidate(editItemRules, editItemForm);
</script>

<template>
<v-text-field variant="outlined" hide-details="auto" id="p" type="number"
                :valid="!editItemV$.price.$error" :color="editItemV$.price.$error ? 'error' : 'success'"
                :error-messages="editItemV$.price.$error ? editItemV$.price.$errors[0].$message.toString() : ''"
                step="0.01" @change="editItemV$.price.$touch" v-model="editItemForm.price" />

<v-text-field variant="outlined" hide-details="auto" id="max_price" type="number"
                :valid="!editItemV$.max_price.$error" :color="editItemV$.max_price.$error ? 'error' : 'success'"
                :error-messages="editItemV$.max_price.$error ? editItemV$.max_price.$errors[0].$message.toString() : ''"
                step="0.01" @change="editItemV$.max_price.$touch" v-model="editItemForm.max_price" />
</template>

（注：修正了原模板中:valid和:color的逻辑错误，原代码中valid绑定逻辑与预期相反，颜色判断也存在偏差）

提取后的ValidationHelpers类 #

export class ValidationHelpers {
    static lessThanMaxPrice(price: number | null, maxPrice: number | null) {
        let isValid = true;

        if (price || maxPrice) {
            if (!maxPrice) {
                isValid = false;
            } else if (price && price >= maxPrice) {
                isValid = false;
            }
        }

        return isValid;
    };
}

错误的调用方式 #

const editItemRules = computed(() => {
    return {
        price: {
            lessThanMaxPrice: (value) => helpers.withMessage(t('validation_errors.price_error'), ValidationHelpers.lessThanMaxPrice(value, editItemForm.max_price)),
        }
   }
});

错误原因 #

当前写法中，ValidationHelpers.lessThanMaxPrice(value, editItemForm.max_price)会直接执行并返回布尔值，但helpers.withMessage的第二个参数需要的是一个校验函数（接收字段值，返回布尔值的函数），而非直接返回布尔值，因此触发TypeScript类型不匹配错误。

正确解决方案 #

1. 修改ValidationHelpers类，返回校验函数 #

调整静态方法，让它接收maxPrice参数后，返回一个符合Vuelidate要求的校验函数：

export class ValidationHelpers {
    // 接收maxPrice，返回一个校验price的函数
    static lessThanMaxPrice(maxPrice: number | null) {
        return (price: number | null) => {
            let isValid = true;

            if (price || maxPrice) {
                if (!maxPrice) {
                    isValid = false;
                } else if (price && price >= maxPrice) {
                    isValid = false;
                }
            }

            return isValid;
        };
    };
}

2. 组件中正确调用 #

在computed规则里，传递当前响应式的max_price给静态方法，获取校验函数后再用helpers.withMessage包装：

const editItemRules = computed(() => {
    return {
        price: {
            lessThanMaxPrice: helpers.withMessage(
                t('validation_errors.price_error'),
                // 传递当前的max_price，获取校验函数
                ValidationHelpers.lessThanMaxPrice(editItemForm.max_price)
            ),
        },
    };
});

3. 优化表单类型定义（可选） #

为了TypeScript类型更严谨，建议用接口定义表单类型：

interface EditItemForm {
    price: number | null;
    max_price: number | null;
}

const editItemForm = reactive<EditItemForm>({
    price: null,
    max_price: null,
});

额外说明 #

• 因为editItemRules是computed，当editItemForm.max_price变化时，规则会自动更新，保证校验逻辑始终基于最新的最大值。
• 原模板中:valid属性应该绑定!editItemV$.price.$error（无错误时为有效），:color在有错误时应该用error而非success，已在示例中修正。

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