如何仅验证 Vee-validate 3.x 中的某些字段？答案

【问题标题】：how can validate only some fields in Vee-validate 3.x?如何仅验证 Vee-validate 3.x 中的某些字段？
【发布时间】：2020-04-02 03:28:43
【问题描述】：

版本：Vee-validate 3.x

有时我只想验证一些字段，有时我想验证所有字段。我该如何使用 ValidationObserver 呢？

<template>
  <ValidationObserver  ref="validationObserver">
    <form>
      <ValidationProvider name="E-mail" rules="required|email" v-slot="{ errors }">
        <input v-model="email" type="email">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider name="First Name" rules="required|alpha" v-slot="{ errors }">
        <input v-model="firstName" type="text">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider name="Last Name" rules="required|alpha" v-slot="{ errors }">
        <input v-model="lastName" type="text">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>


    </form>
  </ValidationObserver>

 <button @click="validateSome">validateSome</button>
 <button @click="validateAll">validateAll</button>
</template>

<script>
export default {
    methods:{
         validateAll(){
               this.$refs.validationObserver.validate().then(isOk=>console.log(isOk))
         }
         validateSome(){
              // if i want to validate only [email,firstName] fields, how can i do ?
         }
    }
}
</script>

如何完成 validateSome 方法？

【问题讨论】：

标签： validation vee-validate

【解决方案1】：

您实际上可以嵌套 Validation Observers！因此，有时尝试将您想要分别验证的两个字段包装在另一个 ValidationObserver 中，给它一个 ref 并像在 validateAll 中调用外部字段一样调用它。

<ValidationObserver ref="validationObserver">
<form>
  <ValidationObserver ref="innerObs">
  <ValidationProvider name="E-mail" rules="required|email" v-slot="{ errors }">
    <input v-model="email" type="email">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>

  <ValidationProvider name="First Name" rules="required|alpha" v-slot="{ errors }">
    <input v-model="firstName" type="text">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
  </ValidationObserver>

  <ValidationProvider name="Last Name" rules="required|alpha" v-slot="{ errors }">
    <input v-model="lastName" type="text">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>

</form>
</ValidationObserver>

那么你的函数是这样的：

     validateSome(){
        this.$refs.innerObs.validate().then(isOk=>console.log(isOk))
     }

【讨论】：