Представьте, что вы создаете одностраничное приложение с парой форм. Как вы собираетесь проверять эти формы? Поскольку мы не хотим обновлять страницу, отправка формы, как обычно, невозможна. Добавление логики проверки к стороне JavaScript просто дублирует логику проверки, уже присутствующую на сервере. Было бы неплохо, если бы мы могли проверять наши внешние формы, используя внутреннюю логику?
Некоторое время назад Джеффри Уэй опубликовал урок Объектно-ориентированные формы в Серии Vue 2.0, который делает именно это. Поскольку я хотел использовать способ работы Джеффри в некоторых реальных проектах, я решил поместить его код (и некоторые дополнительные тонкости) в пакет JavaScript под названием spatie/form-backend-validation. Хотя он может работать и в других фреймворках, он в первую очередь создан с учетом серверной части Laravel.
Для начала работы с пакетом лучше всего посмотреть вышеупомянутое бесплатное видео Объектно-ориентированные формы. Это объяснит ход мыслей, стоящих за этим. Короче говоря, пакет предоставляет класс Form для отправки всех значений формы на сервер. Он будет собирать любые ошибки, которые сервер отправляет обратно. Используя компонент Vue, мы можем легко собрать все значения и отобразить все ошибки. И все это может произойти без необходимости обновлять страницу.
Чтобы помочь вам понять это еще лучше, мы создали пример приложения, в котором установлен пакет. Это самые важные части:
- представление Blade, содержащее форму, которую необходимо проверить
- компонент Vue, который использует класс
Form, предоставляемый пакетом - контроллер, где выполняется фактическая проверка
Если вы настроите пример приложения и нажмете на / маршрут приложения, вы увидите форму, с которой можно поиграть.
Надеемся, что этот класс Form также может быть полезен в ваших проектах. Раньше мы сделали только пару пакетов JavaScript, но я могу представить, что в будущем появится еще несколько.
