vee-validate 3 необязательных поля адреса, но одно обязательное

Question

Я использую проверку формы vee-validate, и у меня есть 3 поля адресов:

1. Номер дома
2. Название дома
3. Номер квартиры

Все 3 являются необязательными , потому что адрес может иметь только 1, но мне нужно, чтобы пользователь заполнил хотя бы один . Поэтому я не могу сделать какие-либо из них обязательными, а документация по проверке перекрестных полей обрабатывает только указание c проверки для одного или нескольких полей:

https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting -другие-поля

What is the best way of handling this? I'm no stranger to custom validation rules in my project, I just don't understand the approach here.

Thanks.

Answer 1

Оберните каждый из них в ValidationProvider и установите необходимое правило для каждого, чтобы оно требовалось, если ни один из двух других не заполнен. Итак, первый будет выглядеть так:

<ValidationProvider :rules="{ 'required': (!value.buildingName && !value.flatNo)">
  <FormTextInput
    name="addressBuildingNo"
    v-model="value.buildingNo"
    type="text"
    :label="$t('formFields.addressBuildingNo')"
    placeholder="e.g 10"
    :hint="$t('formHints.optional')"
  />
</ValidationProvider>

Если вам нужна более сложная проверка, вы также можете написать валидаторы перекрестных полей для каждого из них, которые проверяют вещи более конкретно (следуя документам, которые вы уже указали) . См. Упрощенный пример здесь: https://codesandbox.io/s/veevalidate-30-cross-field-optional-3dzxd

Answer 2

В итоге я просто создал скрытое поле, значение которого представляет собой комбинацию всех трех полей.

<FormTextInput name="addressBuilding" type="hidden" v-model="compBuildingValue" rules="required" />

compBuildingValue() {
  return `${this.value.buildingNo.trim()}${this.value.flatNo.trim()}${this.value.buildingName.trim()}`
}