Я пытаюсь создать собственный валидатор Vue. Я просмотрел их документы https://vuelidate.netlify.com/#custom-validators,, а также очень полезный учебник https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/.
Однако я до сих пор не вижу четкого примера того, как сделать следующее:
У меня есть два поля ввода DatePicker, даты начала и окончания. Я хочу иметь возможность создать валидатор, который может
- Проверить обе даты в тандуме, чтобы убедиться, что дата окончания не раньше даты начала
- Иметь одно сообщение проверки на основедля этого (иначе: мы не хотим, чтобы одно поле с «Дата начала не могло быть раньше даты окончания», а другое с «Дата окончания не может быть раньше даты»)
ThisТип функциональности (или использование других значений полей внутри другого) - это то, что имеет основной валидатор sameAs
(см. ниже):
import { ref, withParams } from './common'
export default (equalTo) =>
withParams({ type: 'sameAs', eq: equalTo }, function(value, parentVm) {
return value === ref(equalTo, this, parentVm)
})
Я пытался имитировать это, но это не работает. ..
import { ref, withParams } from 'vuelidate/lib/validators/common.js'
export default (endDate) =>
withParams({ type: 'dateRange', eq: endDate }, function(value, parentVm) {
console.log('parentVm', parentVm);
return value < ref(endDate, this, parentVm)
})
Это даже не регистрирует мой console.log. Вот код, называющий его
<date-picker id="financial-start-date" v-model="$v.start_date.$model" :config="datepickerConfig"></date-picker>
<date-picker id="financial-end-date" v-model="$v.end_date.$model" :config="datepickerConfig"></date-picker>
![enter image description here](https://i.stack.imgur.com/oIHrN.png)
Проверки:
validations: {
transaction_id: {
},
start_date: {
},
end_date: {
dateRange: dateRange('startDate')
}
},