управление валидациями vuelidate в vuetify

Как вы, ребята, проводите валидацию в Vuetify? Я не могу осмыслить очень подробный синтаксис проверки.

Я использую Vuelidate, и, согласно документации Vuetify, мне пришлось бы реализовать простое обязательное поле:

Скрипт:

import { required } from 'vuelidate/lib/validators';

computed: {
    userNameErrors() {
      const errors = []
      if (!this.$v.loginForm.userName.$dirty) {
        return errors
      }
      !this.$v.loginForm.userName.required && errors.push('This field is required')
      return errors
    }
},
validations: {
    loginForm: {
      userName: {
        required
      }
    }
  }

Шаблон:

 <v-text-field :label="Username"
                    prepend-icon="account_circle"
                    v-model="loginForm.userName"
                    :error-messages="userNameErrors"
                    @input="$v.loginForm.userName.$touch()"
                    @blur="$v.loginForm.userName.$touch()"
                    :required="true"></v-text-field>

Я считаю, что это очень многословно. Возможно, я делаю что-то не так, может ли кто-нибудь сказать, как вы сделали эту минималистичную или короткую руку?


javascript vue.js vuetify.js vuejs2 vuelidate
person pranavjindal999    schedule 31.01.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я просто предлагаю здесь, но использую vuelidate -errors-extractor сделать его немного проще

person mandaputtra    schedule 25.07.2019

arrow_upward
2
arrow_downward

Я придумал следующее решение для обработки общих проверок:

function handleErrors(fieldName, vueObj) {
  const errors = []
  if (!vueObj.$v[fieldName].$dirty) return errors
  if ('email' in vueObj.$v[fieldName]) {
    !vueObj.$v[fieldName].email && errors.push('This email address is invalid')
  }
  if ('required' in vueObj.$v[fieldName]) {
    !vueObj.$v[fieldName].required && errors.push('This field is required')
  }
  if (fieldName in vueObj.serverErrors) {
    vueObj.serverErrors[fieldName].forEach(error => {
      errors.push(error)  
    });
  }
  return errors
}

Затем его можно использовать в своем объекте Vue следующим образом:

...
computed: {
    emailErrors () {
      return handleErrors('email', this)
    },
  },
...

Затем вам нужно обработать возможные типы ошибок в handleError (обязательно, и в этом примере обрабатываются валидаторы электронной почты). Я также использую это, чтобы отображать ошибки полей, возвращаемые серверной частью.

Мне также интересно, можно ли это решить проще!

person codwell    schedule 01.02.2018
comment
спасибо за ответ, но я не ожидал этого. Это общая функция, но не то, что обрабатывает вложенные проверки. Я ожидал какой-нибудь директивы vue или чего-то еще, что могло бы автоматически обрабатывать такие случаи. Как это делают ng-messages (если вы видели), я все равно попробую придумать какое-то решение - person pranavjindal999; 01.02.2018