Vuelidate自定义验证器无法获取组件传入值的问题

问题场景 #

使用@vuelidate/core ^2.0.0-alpha.34和@vuelidate/validators ^2.0.0-alpha.26实现注册页面密码验证时，自定义验证器无法获取输入值，控制台打印undefined，但模板已正确绑定组件变量。

问题原因 #

组件的validations配置中，将passwordValidators作为password的子对象嵌套，导致验证器无法获取正确的字段值上下文；同时confirmPassword的sameAs使用方式不符合Vuelidate 2的要求。

修复步骤 #

1. 调整validations配置结构 #

将passwordValidators展开到password的验证规则中，而非嵌套：

修改前：

password: {
    required,
    passwordValidators
},

修改后：

password: {
    required,
    ...passwordValidators
},

2. 修正sameAs的使用方式 #

Vuelidate 2中sameAs需要接收字段路径字符串，而非直接引用变量：

修改前：

confirmPassword: { required, sameAsPassword: sameAs(this.password) }

修改后：

confirmPassword: { 
    required, 
    sameAsPassword: sameAs('password') 
}

完整修改后的组件validations代码 #

// 导入部分
import passwordValidators from '@/validators/password-requirements';
import { required, email, sameAs } from '@vuelidate/validators';

// defineComponent内的validations方法
validations() {
    return {
        email: { required, email },
        password: {
            required,
            ...passwordValidators
        },
        firstName: { required },
        lastName: { required },
        confirmPassword: { 
            required, 
            sameAsPassword: sameAs('password') 
        }
    }
},

原理说明 #

• 展开passwordValidators后，其内部的验证规则会直接成为password字段的一级验证器，Vuelidate才能正确将字段值传递给这些自定义验证函数。
• 使用字段路径字符串'password'给sameAs，能确保Vuelidate正确关联到目标字段，避免因组件实例初始化时机问题导致的this指向错误。

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