vuetify에서 vuelidate 검증 관리

vuetify에서 vuelidate 검증 관리

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>

내가 느끼는 것은 매우 장황하다.내가 일을 잘못하고 있는 것 같은데, 누가 네가 어떻게 이 미니멀리즘이나 짧은 손을 만들었는지 알 수 있겠니?

그냥 여기서 제안하는 건데, vuelidate-errors-extractor를 사용하면 좀 더 쉽게

일반적인 검증을 처리하기 위해 다음과 같은 솔루션을 생각해 냈습니다.

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에서 발생할 수 있는 오류 유형을 처리해야 합니다(이 예에서는 필수 및 전자 메일 검증자가 처리됨).또한 백엔드에서 반환된 필드 오류를 표시하기 위해 사용합니다.

이 문제를 더 쉽게 해결할 수 있을지도 궁금해요!

언급URL : https://stackoverflow.com/questions/48534769/managing-vuelidate-validations-in-vuetify