1

我正在使用 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;
}

“印象”是<p>标签中打印的变量，“参数”来自注册组件的 vue-model

我尝试将带有“usuario.pwd”或“this.usuario.pwd”的字符串作为*定位器而不是函数发送到“parametro”，就像sameAs()/vuelidate的文档说的那样，但它与纯字符串而不是值，就好像我的密码是“usuario.pwd”或“this.usuario.pwd”字面意思，如果我写这些字符串，那么验证返回值为真，但它与我的usuario不匹配。密码值。

  1. 通过在 utils.js 中使用“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;
            // 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”语句会打印以下内容：

在此处输入图像描述

它会重复，因为当输入字段中出现字符时会执行 const/function。（vuelidate 做这个）

PRINT 1：ConfirmPassword 输入字段的值。

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

打印 3：vuelidation 返回值，在我的密码匹配或不匹配之前始终为 false。

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

  1. 在 utils.js 中使用“helpers.withParams”此时我快疯了，我不确定它是如何工作的，但有一些事情我真的很确定......在密码匹配或之前，Vueidation 返回值仍然是假的不是：C。
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;
}

这是“参数”内容：

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

“parametro”参数值始终相同。

然后我导出这个 const (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,
                    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;
                }) }
            }
    })
}

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

如果您认为 util.js 是问题所在，相信我，在 SignUp.vue 组件中执行所有操作之前，我已经尝试过，将所有验证器传递给 utils.js，然后通过 const 导出这些是“可能的解决方案”和“让事情更有秩序”尝试。

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

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

在此处输入图像描述 ：C

4

0 回答 0