首页 > 解决方案 > 当用户仍在输入字段值时触发Vuelidate验证,即使使用惰性

问题描述

"@vuelidate/core": "^2.0.0-alpha.14",

"@vuelidate/validators": "^2.0.0-alpha.12",

输入密码:123,当开始输入确认密码字段的值时,即使我已将惰性验证声明为真,也会显示验证错误消息。假设当用户离开该字段时触发验证。

我已经尝试过 v-model.lazy 并且还在验证中包含 $lazy: true {}

<ion-item class="ion-no-padding input">
    <ion-label  class="text-size-xs" position="floating">Confrim Password</ion-label>
    <ion-input required type="text" v-model.lazy="registerForm.password_confirmation"></ion-input>
    <ion-icon v-if="v$.registerForm.password_confirmation.$error" class="icon-small" name="remove-circle"></ion-icon>
</ion-item>
<div v-if="v$.registerForm.password_confirmation.$error">
    <p class="text-size-p" v-if="!v$.registerForm.password_confirmation.$match">Not match</p>
</div>
import { useVuelidate } from "@vuelidate/core";
import { required, sameAs } from "@vuelidate/validators";

export default {
  setup () {
    return { 
      v$: useVuelidate() 
    }
  },
  data() {
    return {
      registerForm: {
        phone_number: '',
        password: '',
        password_confirmation: ''
      }
    }
  },
  validations () {
    return {
      registerForm: {
        phone_number: { 
          required,
          $autoDirty: true, $lazy: true
        },
        password: { required, $autoDirty: true, $lazy: true },
        password_confirmation: { required, match: sameAs(this.registerForm.password), $autoDirty: true, $lazy: true }
      }
    }
  }

在此处输入图像描述

标签: vue.jsvuejs3vuelidateionic-vue

解决方案


推荐阅读