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

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

как я могу завершить проверку некоторых методов?


validation vee-validate
person run56333    schedule 02.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы действительно можете вкладывать наблюдателей за валидацией! Итак, попробуйте иногда обернуть два поля, которые вы хотите проверить по отдельности, в другом 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))
     }
person Ryley    schedule 02.04.2020