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

【问题标题】：How to stop validation while onblur event using VeeValidate如何在使用 VeeValidate 的 onblur 事件时停止验证
【发布时间】：2021-07-14 12:53:35
【问题描述】：

我正在使用VeeValidate v3 和coreui。

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

<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>

如您所见，如果用户摆脱了文本输入，验证就会发生，但理想情况下，只有当用户单击注册按钮时才会发生验证。

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

感谢您帮助我摆脱这个问题。

【问题讨论】：

标签： vue.js validation form-submit vee-validate core-ui

【解决方案1】：

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

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

【讨论】：