首页 > 解决方案 > 使用 vuelidate 和 vue 3 验证确认密码字段的问题

问题描述

我在 vuelidate for vue 3 中的确认密码字段存在问题。我的要求是使用密码字段检查确认密码,如果不匹配则发送错误。我为此使用了 vuelidate next 库。当用户与输入交互时,密码和确认密码字段会正确检查。但问题是当用户正确输入密码并确认密码字段并且再次用户更改密码字段验证不起作用时。它仅在用户交互输入时起作用。

这些是我的输入字段我如何使用 vuelidate

   <Password
    v-model.trim="v$.passwordConfirm.$model"
    :feedback="false"
    :class="{ 'p-invalid': v$.passwordConfirm.$error }"
    @blur="v$.passwordConfirm.$touch()"
    class="p-mb-1"
    placeholder="Confirm Password"
    toggleMask
    >
    </Password>
    <template
       v-for="(error, index) of v$.passwordConfirm.$errors"
       :key="index"
    >
      <span v-if="v$.passwordConfirm.$error" class="p-error">{{error.$message}}</span>
    </template>

这是我的验证方法

  passwordConfirm: {
    required: helpers.withMessage(
      "Confirm password cannot be empty. ",
      required
    ),
    sameAsPassword: helpers.withMessage(
      "Confirm password must be same as password you entered above.",
      sameAs(dataAsRefs.password)
    ),
    $lazy: true
  },

标签: javascriptvue.jsvuejs3vuelidate

解决方案


推荐阅读