Vue3中@vuelidate使用sameAs校验确认密码失效如何解决？

项目背景 #

• 技术栈：Vue3、@vuelidate/core、@vuelidate/validators、Bulma CSS框架
• 开发目标：实现注册页确认密码字段与原密码字段的实时一致性校验
• 遇到的问题：耗时一个多月先后尝试3种实现方案均未达标，无论两个密码输入是否一致，确认密码校验始终返回不通过

已尝试的实现方案与卡点 #

方案一：直接使用官方sameAs()校验 #

实现的工具函数代码：

import { helpers, sameAs } from '@vuelidate/validators'
    
const sameAsH = (impresion, parametro) => {
    let compare  =  helpers.withMessage(
        impresion + " no coinciden",
        sameAs(parametro)
    );
    return compare;
}

• 参数说明：impresion 是错误提示的前缀文本，用于渲染在错误提示段落中；parametro 是待比对的原密码属性
• 卡点：按照官方文档对sameAs的locator参数说明，传入 "usuario.pwd"、"this.usuario.pwd" 这类字符串作为参数时，校验逻辑并未解析路径拿到组件内对应属性的真实值，而是直接把传入的字符串本身作为比对目标——只有当用户输入的确认密码完全等于 "usuario.pwd" 这个字面量字符串时，校验才会通过。

方案二：通过helpers.withAsync实现异步自定义校验 #

实现的工具函数代码：

import { helpers } from '@vuelidate/validators'
import config from './Config'

const sameAsH = (impresion, parametro) => {
    let compare  =  helpers.withMessage(
        impresion + " no coinciden",
        helpers.withAsync(async (value)=>{
            let retorno;
            if(await value == parametro){
                retorno = true;
            }
            else{
                retorno = false;
            }
            console.log("PRINT 1: "+value+"\nPRINT 2: "+parametro+"\nPRINT 3: "+retorno)
            return retorno;
        })
    );
    return compare;
}

• 运行表现：输入交互时控制台会实时打印校验日志：
  • PRINT 1：确认密码输入框的当前实时值
  • PRINT 2：预期获取的原密码值（取自注册页组件响应式数据usuario.pwd，预期为用户输入的真实原密码），但实际打印的值和预期始终不匹配
  • PRINT 3：校验返回结果，无论两个密码输入是否完全一致，结果始终为false
• 尝试调整：曾将传入的parametro封装为可执行函数，在异步逻辑中调用后再做比对，修改后控制台不再触发日志输出，校验结果依然始终为false。

方案三：通过helpers.withParams实现自定义校验 #

实现的工具函数代码：

const sameAsH = (impresion, parametro) => {
    let compare  =  helpers.withMessage(
        impresion + " no coinciden",
        helpers.withParams({ type: 'sameAs', eq: parametro }, function(value, parentVm){
            return value === ref(parametro, this, parentVm)
        })
    );
    return compare;
}

调用时传入的parametro是返回原密码值的函数：

function(){
    return this.usuario.pwd;
}

• 组件配置：工具函数导出后在注册页引入，完整的注册页核心代码如下：

export default {
    name: "login",
    data: ()=> ({
        usuario: {
            id: 0,
            username: '',
            pwd: '',
            pwd2: '',
            dui: '',
            nit: '',
            nombres: '',
            apellidos: '',
            code: 0,
            mail: '',
            confirm: 0,
        },
        modal: { active: "" },
        errors: { session: null }
    }),
    setup: () => ({ v$: useVuelidate()}),
    validations: () => ({
        usuario: {
            nombres: { requiredH },
            apellidos: { requiredH },
            username: {
                requiredH,
                availableUser: availableH("usuario","User", "usuario", axios),
                minLength: minLengthH("El usuario", 6)
            },
            mail: {
                requiredH,
                emailH,
                availableMail: availableH("email", "Email", "correo electrónico", axios)
            },
            pwd: { requiredH, minLength: minLengthH("La contraseña", 8) },
            dui: { requiredH },
            nit: { requiredH },
            pwd2: { sameAsPassword: sameAsH( "Las contraseñas", function(){
                return this.usuario.pwd;
            }) }
        }
    })
}

• 卡点：曾尝试不抽离工具函数，直接在组件内部编写校验逻辑，问题依然存在，确认密码校验始终无法通过。

问题根源 #

三个方案的核心偏差来自对Vuelidate运行机制的误解：

• sameAs的路径参数需要传入相对于当前校验对象的相对路径，而非从组件根开始的绝对路径。方案一传入的usuario.pwd是从组件根开始的路径，但当前校验对象本身已经嵌套在usuario层级下，Vuelidate会把传入的路径当成当前层级下的相对路径解析，自然找不到对应属性。
• 自定义校验函数的执行上下文绑定的是Vuelidate的校验实例，不是组件实例，直接在函数中用this.usuario.pwd会因为上下文指向错误拿到undefined，导致比对永远失败。
• 异步校验逻辑中传入的参数是组件初始化时的快照值，不是实时响应式引用，后续用户输入更新原密码值时，校验逻辑拿到的依然是初始的空字符串，比对自然永远返回false。

可落地的正确实现 #

方案A：使用官方sameAs简化实现 #

调整工具函数和调用时的路径参数，使用相对路径做匹配：

// utils.js 修正后的工具函数
import { helpers, sameAs } from '@vuelidate/validators'
    
export const sameAsH = (errorPrefix, targetPath) => {
    return helpers.withMessage(
        `${errorPrefix} no coinciden`,
        sameAs(targetPath)
    );
}

在组件校验配置中，因为确认密码pwd2的校验规则嵌套在usuario对象下，和原密码pwd是同层级属性，所以传入相对路径'pwd'即可，Vuelidate会自动沿着当前校验对象的层级实时解析目标值做比对：

// SignUp.vue 修正后的校验配置
validations: () => ({
    usuario: {
        // 其他字段校验保持不变
        pwd: { requiredH, minLength: minLengthH("La contraseña", 8) },
        pwd2: { 
            sameAsPassword: sameAsH("Las contraseñas", 'pwd') 
        }
    }
})

方案B：自定义校验灵活实现 #

如果需要自定义校验逻辑、不依赖官方sameAs，可以利用Vuelidate传给校验函数的第二个参数parentVm获取组件实例，实时读取原密码值做比对：

// utils.js 修正后的自定义校验函数
import { helpers } from '@vuelidate/validators'
    
export const sameAsH = (errorPrefix, getTargetValue) => {
    return helpers.withMessage(
        `${errorPrefix} no coinciden`,
        (value, parentVm) => {
            // 通过parentVm拿到组件实例，动态读取实时的原密码值
            const targetValue = getTargetValue(parentVm)
            return value === targetValue
        }
    );
}

在组件中调用时，传入读取原密码的取值函数即可：

// SignUp.vue 校验配置
pwd2: { 
    sameAsPassword: sameAsH("Las contraseñas", (vm) => vm.usuario.pwd) 
}

内容的提问来源于stack exchange，提问作者Benja Ramírez