Как написать пользовательскую/универсальную проверку для полей ввода с помощью vee-валидации в vuejs2

Ниже мой код. В нем есть поля ввода имени, фамилии, отчества. Я хочу использовать единый метод, чтобы выдать ошибку для этих полей. Я могу передать только одно поле внутри функции validator.extend. Например: Validator.extend('firstName', {});. Но я хотел бы передать Validator.extend('firstName','lastName', 'middleName', {});( или )Validator.extend('fieldNames', {}); как это. Пожалуйста помоги.

<template>
 <b-card>
    <h4 slot="header" class="card-title">Employee</h4>
        <b-row>
            <b-col sm="3">
              <b-form-group>
                <label for="name">First Name </label>
                <input type="text" id="name"  class="form-control" placeholder="Enter your name" v-validate="'required|firstName'" name="firstName">
                        <span v-show="errors.has('firstName')" class="is-danger">{{ errors.first('firstName') }}</span>
               </b-form-group>
            </b-col>
             <b-col sm="3">
              <b-form-group>
                <label for="name">Last Name </label>
                <input type="text" id="name"  class="form-control" placeholder="Enter your middle name" v-validate="'required|lastName'" name="lastName">
                        <span v-show="errors.has('lastName')" class="help is-danger">{{ errors.first('lastName') }}</span>
              </b-form-group>
            </b-col>
             <b-col sm="3">
              <b-form-group>
                <label for="name">Middle Name </label>
                <b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
              </b-form-group>
            </b-col>
          </b-row>

          <b-row>
            <b-col sm="3">
              <b-form-group>
                <label for="name">Employee ID</label>
                <b-form-input type="text" id="name" placeholder="ID"></b-form-input>
              </b-form-group>
            </b-col>
             <b-col sm="3">
              <b-form-group>
                <label for="name">Gender</label>
                <b-form-input type="text" id="name" placeholder="Gender"></b-form-input>
              </b-form-group>
            </b-col>
             <b-col sm="3">
              <b-form-group>
                <label for="name">Nationality</label>
                <b-form-input type="text" id="name" placeholder="Nationality"></b-form-input>
              </b-form-group>
            </b-col>
          </b-row>
         <input type="submit" value="Submit" @click="validateForm">
 </b-card>
</template>

<script>

import Vue from 'vue'
import VeeValidate from 'vee-validate';
import { Validator } from 'vee-validate';
Vue.use(VeeValidate);

export default {
  name: 'addEmpl',

   created: function() {
    Validator.extend('firstName', {
    getMessage: field => 'Enter valid first name',
    validate: value => /^[a-zA-Z]*$/.test(value)
});
   },
   methods: {
    validateForm() {
        this.$validator.validateAll();
    }
   }
}
</script>

<style lang="scss" scoped>
.is-danger{
  color:  RED;
}
</style>

vue.js vuejs2 vee-validate
person Ashwini    schedule 02.05.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете передать объект своей пользовательской проверке (и даже вернуть его в методе):

<input placeholder="Enter your name" v-validate="validations('firstName')">

created() {
  Validator.extend('fieldName', {
    getMessage(field, val) {
      return `Enter valid ${val}`
    },
    validate(value, field) {
      if (field == 'firstName') { return /^[a-zA-Z]*$/.test(value) }
      else if (field == 'lastName') { return  /^[a-z]*$/.test(value) }
      // and so on
    }
  })
},
methods: {
  validations(field) {
    return { required: true, fieldName: field }
  }
}
person Sovalina    schedule 02.05.2018
comment
Приведенный выше код работает нормально. Пожалуйста, помогите мне решить проблему по этой ссылке - person Ashwini; 03.05.2018