在vuetify中管理vuetify验证

Question

你们是如何在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
      }
    }
  }

模板：

我觉得非常冗长。我可能做错了事情，有谁能告诉我你是如何写出这个简约或速记的吗？

Answer 1

我在这里只是建议，但是使用vuelidate-errors-extractor让它变得简单一点

Answer 2

我想出了以下解决方案来处理泛型验证：

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中处理可能的错误类型(本例中处理了required和email验证器)。我还使用它来显示从后端返回的字段错误。

我也很好奇是否可以更容易地解决这个问题！