Здравствуйте! Пытаюсь изучать vuejs, для простых вещей всё довольно понятно.
Однако дошел до точки, когда захотелось автоматизировать валидацию полей ввода на формах.
Я написал ТЗ, которое легко могу реализовать не используя vue js, вот оно:
-----------------------------------------------------------
Назначение
Сделать поддержку атрибута data-validators для полей ввода
input[type=text]
input[type=number]
input[type=password]
input[type=email]
Работает со стандартной версткой полей ввода bootstrap 4.2.1 вида
<div class="col-md-6 mb-3">
<label for="iPassword">Password</label>
<input type="password" class="form-control is-invalid" id="iPassword" placeholder="Enter password" required>
<div class="invalid-feedback">
Password must containts numbers and letters different case: upper and lower.
</div>
</div>
Для указанного примера программист может добавить
атрибут data-validators="[oB421Validator.password,oB421Validator.required]" полю input[type=password].
И добавить в инициализацию js приложения строку вида
window.oB421Validator = new B421Validator(window.Localizator.t);
Модуль перехватывает событие submit формы, в которой содержится поле ввода и если введенное значение не валидно,
добавляет класс is-invalid и заполняет div.invalid-feedback локализованым сообщением.
(Функцию локализации можно передать в конструктор например так:
oB421Validator = new B421Validator(t);
)
Модуль перехватывает событие input поля ввода, удаляет is-invalid при начале ввода и очищает div.invalid-feedback.
Если в процессе ввода введено валидное значение, добавляет полю ввода класс is-valid.
Для использования другой верстки (или других версий бутстрап) планируется наследоваться от B421Validator и перегружать
методы, ответственные за отображение полей формы.
-----------------------------------------------------------
КОНЕЦ ТЗ
-----------------------------------------------------------
Но я совсем не понимаю, как это реализовать используя vue js.
Если бы речь шла о не универсальном решении, верстка выглядела бы так:
<div class="col-md-6 mb-3">
<label for="iPassword">Password</label>
<input placeholder="$t('Enter password')" v-model="password" v-bind:class="passwordIsInvalid" type="password" name="iPassword" required>
<div class="invalid-feedback">
{{ passwordError }}
</div>
</div>
и я использовал бы связанные поля для реализации нужного поведения.
Проблема в том, что при таком подходе для каждого поля ввода мне придётся создавать несколько переменных в компоненте vue
, отвечающим за форму (в этом примере их три, passwordError, passwordIsInvalid, password)
и повторять это в каждом компоненте. Это уныло.
Думаю, в vue js есть способ реализовать то, что написано в ТЗ, просто я его пока не вижу (документацию читаю
тут).
Можете подсказать, в какую сторону смотреть?
