7

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

我觉得这很冗长。我可能做错了事，谁能告诉你这个极简主义或短手是怎么做的？

4

2 回答 2

3

我只是在这里提出建议，但是使用vuelidate-errors-extractor使它更简单一些

于 2019-07-25T15:41:37.700 回答
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 中处理可能的错误类型（示例中处理了必需的和电子邮件验证器）。我还使用它来显示从后端返回的字段错误。

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

于 2018-02-01T08:05:50.540 回答