Блог

Я использую vuelidate, и мне нужно выполнить некоторую пользовательскую проверку, но она включает в себя учет различных полей. Например: у меня есть переключатель для выбора между Month и Year

Если я выберу Month , у меня будет выпадающее Year Start меню (2021, 2020,…) и Month Start (1, 2, 3…) Year End , а Month End также выпадающее меню «и».

Если я выберу Year , у меня будет выпадающее меню Year Start (2021, 2020,…) и Year End (2021, 2020,…).

Моя проблема в том, что мне нужно проверить month вариант, который year start больше, чем year end или что они могут быть равны и month start должны быть больше, чем month end .

И для year варианта Year start должно быть больше, чем Year End

У меня есть это:

 validations() {
  return {
    form: {
      startMonth: {},
      startYear: { required },
      endMonth: {},
      endYear: { required },
    }
  };
}
 

Это логика, которую я хочу превратить в пользовательский валидатор

 if (this.option === "Year") {
  if (this.startYear > this.endYear) {
    return true;
  } else {
    return false;
  }
}

else if (this.option === "Month") {
  if (this.startYear > this.endYear) {
    return true;
  } else if (this.startYear == this.endYear amp;amp; parseInt(this.startMonth) > parseInt(this.endMonth)) {
    return true;
  } else {
    return false;
  }
}
 

Любое понимание, помощь будут высоко оценены.

ОБНОВИТЕ Возможное Решение:

 <script>
import { validationMixin } from 'vuelidate';
import { required } from 'vuelidate/lib/validators';
  data() {
    return {
      form: {
        month: null,
        year: null,
        compareMonth: null,
        compareYear: null
      },
    };
  },
  computed: {
    disableApply() {
      return this.$v.form.$invalid;
    },
  },

  methods: {
    validateYear() {
      if (this.$v.form.year.$model > this.$v.form.compareYear.$model) {
        return true;
      } else {
        return false;
      }
    },

    validateMonth() {
      if (this.validateYear()) {
        return true;
      } 

      if (this.$v.form.year.$model === this.$v.form.compareYear.$model amp;amp; parseInt(this.$v.form.month.$model) > parseInt(this.$v.form.compareMonth.$model)) {
        return true;
      } else {
        return false;
      }
    }
  },

  validations() {
    return {
      form: {
        month: { required, validateMonth: this.validateMonth },
        year: { required, validateMonth: this.validateYear },
        compareMonth: { required, validateMonth: this.validateMonth },
        compareYear: { required, validateMonth: this.validateYear },
      }
    };
  }
};
</script>
 

В соответствии с accessing-component этим вы можете напрямую получить доступ к экземпляру компонента, используя this ключевое слово.
Попробуйте преобразовать свой код в методы экземпляра Vue, такие как

 function validateYear() {
  if (this.startYear > this.endYear) {
    return true;
  } else {
    return false;
  }
}

function validateMonth() {
  if (this.validateYear()) {
    return true;
  }
  if (this.startYear == this.endYear amp;amp; parseInt(this.startMonth) > parseInt(this.endMonth)) {
    return true;
  } else {
    return false;
  }
}
 

а затем примените их в качестве пользовательских валидаторов:

 validations() {
  return {
    form: {
      startMonth: {
        validateMonth: this.validateMonth
      },
      startYear: { 
        required,
        validateMonth: this.validateYear
      },
      endMonth: {
         validateMonth: this.validateMonth
      },
      endYear: { 
        required,
        validateMonth: this.validateYear
      },
    }
  };
}
 

P. S это, вероятно, можно было бы оптимизировать лучше, используя переданные значения, this.$v значения, троичные выражения и т.д., Я просто хочу дать вам идею для продвижения вперед