vuelidate, как сделать custom проверку?
Мне нужно с помощью vuelidate сделать проверку, начинается ли строка с цифры 7? В доках нашел что-то типо того:
phone: {
required,
minLength: minLength(11),
maxLength: maxLength(11),
isPhone(phone) {
if (phone[0] === '7') {
return true;
}
},
},
но при использовании v-if="!$v.form.phone.isPhone" вылетает ошибка: Error in render: "TypeError: Cannot read property '__isVuelidateAsyncVm' of undefined". Кто занет как правильно сделать. И еще, если знаете как проверить есть ли вообще ошибки в валидации(во всей форме), то как это можно проверить, что бы делать disabled кнопки?
Ответы (1 шт):
В доках есть пример https://vuelidate.js.org/#custom-validators
Есть еще неплохой пример тут https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/
Следует создать отдельный файл validators.js, где будут размещаться кастомные функции для валидации, пример содержания файла:
export function isPhone(phone) {
return phone[0] === '7'
}
Потом этот файл подключить в компоненте:
import { isPhone } from "./validators";
А дальше уже использовать этот кастомный валидатор так же как встроенные.
И еще, если знаете как проверить есть ли вообще ошибки в валидации(во всей форме), то как это можно проверить, что бы делать disabled кнопки?
Можно использовать такую проверку, более подробно есть в доках в разделе Data nesting:
this.$v.$invalid