Vue 3 "sameAs(*locator)" @vuelidate/core 很少不工作

问题描述

我正在使用 Vue 3、@vuelidate/core、@vuelidate/validators 和 Bulma 框架开发前端应用。

但是，我有一个月和几周的时间尝试验证“confirmPassword”字段，并且我尝试了 3 种不同的方法：

1. 通过在 utils.js 文件中使用来自@vuelidate/validators 的 sameAs() 函数。像这样

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

    return compare;
}

"impresion" 是用于打印在 <p> 标签中的变量，"parametro" 来自注册组件中的 vue-model

我尝试向“parametro”发送一个带有“usuario.pwd”或“this.usuario.pwd”的字符串作为*定位器而不是一个函数，就像sameAs()/vuelidate的文档说的那样，但它比较使用纯字符串而不是值，就好像我的密码是字面上的“usuario.pwd”或“this.usuario.pwd”一样，如果我写这些字符串，则验证返回值为真，但它与我的 usuario.pwd 值。

2. 通过在 utils.js 中使用“helpers.withAsync”

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

const sameAsH = (impresion,helpers.withAsync(async (value)=>{
            let retorno;
            // let funcCompare = parametro
            // let comp = await funcCompare();
            // if(await value == comp){
            if(await value == parametro){
                retorno = true;
            }
            else{
                retorno = false;
            }

            console.log("PRINT 1: "+value+"\nPRINT 2: "+parametro+"\nPRINT 3: "+retorno)

            return retorno;
        })
    );
    return compare;
}

当我与密码和确认密码字段交互时，“console.log”语句打印：

它重复是因为当输入字段中的字符倾斜时执行常量/函数。 （vuelidate 使这个）

PRINT 1：ConfirmPassword 输入字段的值。

打印 2：this.usuario.pwd 的“值”。它来自 SignUp.vue 组件中的 vue 模型。我正在尝试从函数中获取 vue-model 的值。 （我会带你向前看）。这应该是“12345678”

打印 3：验证返回值，在我的密码匹配与否之前始终为 false。

看看注释行，我只是在想：“如果我像执行函数一样执行 'parametro' 值怎么办？”。但是如果我取消注释，代码不会执行“console.log”语句并且 vuelidation 返回值仍然为 false。

3. 在 utils.js 中使用“helpers.withParams” 在这一点上，我快疯了，我不确定这是如何工作的，但有一些我真的很确定......在密码匹配与否之前，Vueidation 返回值仍然是假的：C。

const sameAsH = (impresion,helpers.withParams({ type: 'sameAs',eq: parametro },function(value,parentVm){
            return value === ref(parametro,this,parentVm)
        })
    );

    return compare;
}

这是“参数”内容：

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

“parametro”参数值始终相同。

然后我导出这个常量（sameAsH/"sameAs helper"）以便在 SingUp.vue 上使用它。

import { requiredH,availableH,emailH,minLengthH, 此处：sameAsH } from '../utils'

我在 SignUp.vue 中的 vue 代码如下所示：

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,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;
                }) }
            }
    })
}

请特别注意 usuario.pwd2 验证，这是我使用 utils.js 中的 sameAsH const 时的情况。

如果你认为 util.js 是问题，相信我，我已经尝试过在 SignUp.vue 组件中做所有事情之前，将所有验证器传递给 utils.js，然后通过 const 导出它们是一个“可能的解决方案”以及“让事情更有秩序”的尝试。

如果您知道使用@vuelidate/core 和@vuelidate/validators 验证密码确认的方法，或者您知道我做错了什么，请告诉我。随意提出您的问题...请帮忙，我受够了这个。

这总是行为（直到我的密码匹配或不匹配）：

:C

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）