Vuelidate common validation logic

Question

I am currently studying front-end javascript development and current doing a personal project using VueJS, Vuetify and Vuelidate.

I have a simple question.

I have two text fields as below.

  <v-layout wrap>
    <v-flex>
      <v-text-field
        label="First Name"
        maxlength="20"
        v-model.trim="firstName"
        :error-messages="firstNameErrors"
        @input="$v.firstName.$touch()"
        @blur="$v.firstName.$touch()"
      ></v-text-field>
    </v-flex>
    <v-flex>
      <v-text-field
        label="Last Name"
        v-model.trim="lastName"
        maxlength="20"
        :error-messages="lastNameErrors"
        @input="$v.lastName.$touch()"
        @blur="$v.lastName.$touch()"
      ></v-text-field>
    </v-flex>
  </v-layout>

I have a vuelidate written in the computed hook as below.

  computed: {
    firstNameErrors () {
      const errors = []
      if (!this.$v.firstName.$dirty) return errors
      !this.$v.firstName.required && errors.push('First Name is required')
      return errors
    },
    lastNameErrors () {
      const errors = []
      if (!this.$v.lastName.$dirty) return errors
      !this.$v.lastName.required && errors.push('Last Name is required')
      return errors
    }

The code works fine and does what is supposed to do, generate validation errors, "required" in my case.

My question is, I would like to include both validation error functions "firstNameErrors" and "lastNameErrors" under one function named "requiredErrors" rather than having two separate functions.

Code pen: https://codepen.io/pen/jebLgM

Any help is much appreciated.

Thank you.

Answer 1

我不遵循您的逻辑，但是从字面上接受您的请求可能看起来像这样：

 <v-layout wrap>
    <v-flex>
      <v-text-field
        label="First Name"
        maxlength="20"
        v-model.trim="firstName"
        :error-messages="requiredErrors"
        @input="$v.firstName.$touch()"
        @blur="$v.firstName.$touch()"
      ></v-text-field>
    </v-flex>
    <v-flex>
      <v-text-field
        label="Last Name"
        v-model.trim="lastName"
        maxlength="20"
        :error-messages="requiredErrors"
        @input="$v.lastName.$touch()"
        @blur="$v.lastName.$touch()"
      ></v-text-field>
    </v-flex>
  </v-layout>

  computed: {
    requiredErrors () {
      const errors = []
      this.$v.firstName.$dirty 
        && !this.$v.firstName.required 
        && errors.push('First Name is required')
      this.$v.lastName.$dirty
        && !this.$v.lastName.required 
        && errors.push('Last Name is required')
      return errors
    }

更新

是的，这就是为什么我说我不遵循您的逻辑（两个输入内容相同）。您可以通过bind使用不同的第1个参数多次对函数进行调用来实现所需的功能，但是该函数不再是组件的方法（因为这些已经被Vue绑定了）。

也许是这样的：

<v-text-field
    label="First Name"
    maxlength="20"
    v-model.trim="firstName"
    :rules="requiredErrorsFirstName"
    @input="$v.firstName.$touch()"
    @blur="$v.firstName.$touch()"
  ></v-text-field>

<v-text-field
    label="Last Name"
    v-model.trim="lastName"
    maxlength="20"
    :rules="requiredErrorsLastName"
    @input="$v.lastName.$touch()"
    @blur="$v.lastName.$touch()"
  ></v-text-field>

computed:
{
  requiredErrorsFirstName ()
  {
    return [requiredErrors.bind(this,'firstName')];
  },
  requiredErrorsLastName ()
  {
    return [requiredErrors.bind(this,'lastName')];
  }
}

function requiredErrors(fieldName, fieldValue)
{
  switch(fieldName)
  {
    case 'firstName':
      return this.$v[fieldName].$dirty 
            && !this.$v[fieldName].required 
            ? 'First Name is required' : true;
    case 'lastName':
      return this.$v[fieldName].$dirty 
            && !this.$v[fieldName].required 
            ? 'Last Name is required' : true;   
  }
}

我个人认为这很丑陋，宁愿为每个字段使用单独的计算属性或方法。