Как проверить только некоторые поля в Vee-validate 3.x? - PullRequest
Новая
       25

Как проверить только некоторые поля в Vee-validate 3.x?

1 голос
/ 02 апреля 2020

версия: 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>

Как я могу финишировать sh validateSome методы?

1 Ответ

0 голосов
/ 02 апреля 2020

На самом деле вы можете вкладывать наблюдателей! Итак, попробуйте обернуть два поля, которые вы хотите проверить отдельно, иногда в другом ValidationObserver, присвойте ему ссылку и вызовите ее так же, как вы вызываете внешнее в 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))
     }
...