如何使用 VeeValidate 在 onblur 事件时停止验证

Question

我正在使用 VeeValidate v3 and coreui。

我的问题是如何避免在 onblur 事件时进行验证并仅在 onsubmit 事件时使用 VeeValidate 允许？

<template>
  <div class="d-flex align-items-center min-vh-100">
    <CContainer fluid>
      <CRow class="justify-content-center">
        <CCol md="6">
          <CCard class="mx-4 mb-0">
            <CCardBody class="p-4">
              <ValidationObserver v-slot="{ invalid }" ref="form" :disabled="true">
                <CForm novalidate  @submit.prevent="onSubmit" class="sign">
                  <h2 class="aligncenter my-5">Create Account</h2>
                  <ValidationProvider name="FirstName" rules="required" v-slot="{ errors }">
                    <CInput v-bind:class="{InputError:errors.length > 0}"
                      label="FirstName"
                      placeholder="First Name"
                      :description="errors[0]"
                      v-model="form.name.firstName" type="text"
                    />
                  </ValidationProvider>
                  <ValidationProvider name="LastName" rules="required" v-slot="{ errors }">
                      <CInput v-bind:class="{InputError:errors.length > 0}"
                        label="LastName"
                        placeholder="Last Name"
                        :description="errors[0]"
                        v-model="form.name.lastName" type="text"
                      />
                  </ValidationProvider>
                  ...
                  <div class="flex flex-center">
                    <CButton class="login-btn btn-lg f-w my-3" :disabled="invalid" color="success" label="Login" @click="register" >SIGN UP</CButton>
                  </div>
                </CForm>
              </ValidationObserver>
              <p class="aligncenter mt-10">Already a user? <router-link to="/login"><span class="text-success"><strong>SIGIN IN</strong></span></router-link></p>
            </CCardBody>
          </CCard>
        </CCol>
      </CRow>
    </CContainer>
  </div>
</template>

export default {
  name:"LoginPage",
  data() {
    return {
      form: {
        name:{
          firstName:"",
          lastName:"",
        }
        ...
    };
  },
  methods: {
    ...
    async register() {
      this.$refs.form.validate().then(async success => {
        if (!success) {
          return;
        }
        var result = await this.registerUser(this.form); 

        if (!result.success) {
          this.$toasted.error(result.message?result.message:"Some error occur");
        }
      });
    }
  }
};
</script>

正如您在图片中看到的那样，如果用户不再输入文本，就会进行验证，但理想情况下，只有在用户单击注册按钮时才会进行验证。

在尝试硬编码后我无法弄清楚这一点。

感谢您帮我解决这个问题。

Answer 1

vee-validate v3 中有一个称为“交互模式”的功能，允许您自定义何时验证您的字段。

您正在寻找的是 passive mode，它仅在提交时验证。