Vuelidate中not验证器与动态值的sameAs组合失效问题排查

问题现象 #

使用Vuelidate时遇到以下验证逻辑异常：

• ❌ not(sameAs(动态响应式值))无法正常实现"不能与目标值相同"的验证
• ✅ 单独使用sameAs(动态响应式值)可正常验证"与目标值相同"
• ✅ not(sameAs(静态字符串))可正常验证"不能与静态值相同"

问题代码示例 #

原代码中失效的核心部分：

<script setup lang="ts">
import { reactive, computed } from "vue";
import { useVuelidate } from "@vuelidate/core";
import { required, sameAs, not } from "@vuelidate/validators";

const formData = reactive({
    username: "",
    notSameAsComputed: "",
});

const rules = computed(() => ({
    notSameAsComputed: {
        notSameAs: not(sameAs(formData.username)), // 此处验证逻辑失效
    },
}));

const v$ = useVuelidate(rules, formData);
</script>

原因分析 #

直接传递响应式值给sameAs时，sameAs会在初始化时捕获该值的当前快照，后续响应式更新无法触发外层not验证器重新计算。单独使用sameAs时，Vuelidate内部可正确追踪响应式依赖，但嵌套在not高阶验证器中时，依赖追踪出现断层，导致动态值更新无法同步到验证逻辑。

解决方案 #

将sameAs的目标值改为函数形式传入，让sameAs每次验证时都重新获取最新的响应式值：

<script setup lang="ts">
import { reactive, computed } from "vue";
import { useVuelidate } from "@vuelidate/core";
import { required, minLength, email, sameAs, not } from "@vuelidate/validators";

const formData = reactive({
    username: "",
    sameAsComputed: "",
    notSameAsComputed: "",
    notSameAsStatic: "",
    email: "",
    password: "",
});

const rules = computed(() => ({
    username: {
        required,
        minLength: minLength(6),
    },
    sameAsComputed: {
        sameAs: sameAs(() => formData.username), // 可选：统一改为函数形式保持一致性
    },
    notSameAsComputed: {
        notSameAs: not(sameAs(() => formData.username)), // 修复后的验证逻辑
    },
    notSameAsStatic: {
        notSameAs: not(sameAs("asdf")),
    },
    email: {
        required,
        email,
    },
    password: {
        required,
        minLength: minLength(8),
    },
}));

const v$ = useVuelidate(rules, formData);
</script>

原理说明 #

sameAs验证器支持传入返回目标值的函数，当目标值为响应式数据时，该函数会在每次验证时执行，获取最新的响应式值，确保外层not验证器能感知到目标值的变化，从而正确执行反向验证逻辑。

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