Как правильно реализовать на vue js модуль или плагин, реализующий некоторое "стандарное" поведение для полей ввода?

@byte256 · Регистрация: 06.07.2019

Author24 — интернет-сервис помощи студентам

Как правильно реализовать на vue js модуль или плагин, реализующий некоторое "стандарное" поведение для полей ввода?

Здравствуйте! Пытаюсь изучать vuejs, для простых вещей всё довольно понятно.
Однако дошел до точки, когда захотелось автоматизировать валидацию полей ввода на формах.
Я написал ТЗ, которое легко могу реализовать не используя vue js, вот оно:
--------------------------------------------------------------------------------
Назначение
Сделать поддержку атрибута data-validators для полей ввода
input[type=text]
input[type=number]
input[type=password]
input[type=email]

Работает со стандартной версткой полей ввода bootstrap 4.2.1 вида

HTML5

<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 приложения строку вида

Javascript

1	window.oB421Validator = new B421Validator(window.Localizator.t);

Модуль перехватывает событие submit формы, в которой содержится поле ввода и если введенное значение не валидно,
добавляет класс is-invalid и заполняет div.invalid-feedback локализованым сообщением.
(Функцию локализации можно передать в конструктор например так:

Javascript

1	oB421Validator = new B421Validator(t);

Модуль перехватывает событие input поля ввода, удаляет is-invalid при начале ввода и очищает div.invalid-feedback.
Если в процессе воода введено валидное значение, добавляет полю ввода класс is-valid.

Для использования другой верстки (или других версий бутстрап) планируется наследоваться от B421Validator и перегружать
методы, ответственные за отображение полей формы.
--------------------------------------------------------------------------------

Но я совсем не понимаю, как это реализовать используя vue js.

Если бы речь шла о не универсальном решении, верстка выглядела бы так

HTML5

<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 есть способ реализовать то, что написано в ТЗ, просто я его пока не вижу (документацию читаю тут https://ru.vuejs.org/v2/guide/index.html).
Можете подсказать, в какую сторону смотреть?

@carrotik · 08.07.2019, 12:04

..у vue есть vuex, который можно рассматривать как центральное хранилище (store) не только данных, но и методов .. соответственно, функцию валидации можно организовать там для всех компонентов ...

@vrm2 · 08.07.2019, 20:55

Сделай один компоненту my-input. Этот компонент будет работать с passwordError, passwordIsInvalid, password.

password - передавать как v-model, почитай пользовательские компоненты ввода

passwordError - передавать через свойства или через слоты

passwordIsInvalid - будет вычисляться внутри компонента. Для этого в компонент нужно будет передать валидатор и использовать его для проверки введенного значения

@carrotik 800 / 583 / 207 Регистрация: 21.02.2019 Сообщений: 2,095
	08.07.2019, 12:04	2
	..у vue есть vuex, который можно рассматривать как центральное хранилище (store) не только данных, но и методов .. соответственно, функцию валидации можно организовать там для всех компонентов ... 0

@vrm2 431 / 302 / 89 Регистрация: 03.12.2015 Сообщений: 738
	08.07.2019, 20:55	3
	Сделай один компоненту my-input. Этот компонент будет работать с passwordError, passwordIsInvalid, password. password - передавать как v-model, почитай пользовательские компоненты ввода passwordError - передавать через свойства или через слоты passwordIsInvalid - будет вычисляться внутри компонента. Для этого в компонент нужно будет передать валидатор и использовать его для проверки введенного значения 1