Формы - повседневная задача для многих разработчиков. К тому же, на мой взгляд, один из самых скучных. Недавно я решил создать довольно сложную форму в проекте Laravel, в котором я работал с большим количеством магии Vue.js. Но как мы проверяем ввод в таком случае? Сохраняю ли я нормальный поток возврата с помощью input () и errors ()? Что ж, я бы предпочел не делать этого.

Существует множество решений, наиболее популярным из которых является компонент Vee-validate. Проблема, с которой я столкнулся с этими инструментами, заключалась в том, что мои проверки иногда были сложными, поэтому готовых было недостаточно, и мне приходилось писать много нестандартных вещей для выполнения этой работы.

Почему бы не заставить фреймворк Laravel выполнять эту работу? - спросил я себя. Он уже делает это на удивление хорошо. Было бы здорово иметь одно место и одну кодовую базу для валидации, поддерживать такую ​​вещь было бы блаженством. После некоторой настройки я обнаружил чрезвычайно простой способ сделать это, и подумал, что было бы здорово поделиться им со всем миром. Компонент Vee-validate работает следующим образом:

  1. Пользователь отправляет форму.
  2. При отправке события vee-validate проверяет данные на стороне клиента.
  3. Если все в порядке, вы делаете обычный пост формы с данными.
  4. Если есть ошибки, у вас есть свойство error, которое можно использовать для отображения / скрытия ошибок и полей.

Этот поток дал мне идею следующего трюка, и поэтому я фактически заменил второй шаг.

В чем фокус?

Тег формы указывает на метод vue. Я использую режим «предотвращения», поэтому форма фактически нигде не публикуется.

<form method="POST" action="https://yoururl.com" accept-charset="UTF-8" id="yourForm" @submit.prevent="submitForm()">

Давайте посмотрим на метод submitForm () в моем экземпляре vue.js.

/// Vue.js instance
submitForm: function(){
     // generate the data variable first, with the needed input.
axios.post('/your-url',data).then(function(response){
         document.getElementById("yourForm").submit();
   }).catch( error => {
       this.formErrors = error.response.data.errors;
   });
}

Итак, что здесь происходит? Вы делаете почтовый запрос, используя пакет axios, по тому же маршруту, что и URL-адрес действия формы. Используя объект запроса формы в этом методе, в случае сбоя Laravel автоматически отвечает ошибками в формате JSON. Если есть ошибки, вы перехватываете их в блоке catch, назначаете их переменной и делаете все необходимое, чтобы предупредить пользователя об ошибках.

С другой стороны, если вы публикуете идеальную форму без ошибок, Laravel Controller видит, что это запрос Ajax и

// Laravel controller method
public function store(YourRequestValidation $request)
{
     if ($request->expectsJson()) {
      return response()->json(['valid' => true], 200);
     }
     // Your rest controller logic that will handle the form data.
}

с этим специальным блоком if () после успешной проверки мы перенаправляемся со статусом 200OK, чтобы мы могли оказаться внутри блока axios.then (). Осталось только сделать фактическую первоначальную публикацию формы, которую мы предотвратили в первую очередь.

Вы можете подумать, о боже! это запустит метод отправки vue и предотвратит это действие, но нет, это не так. Фактическая публикация формы будет сделана, и Laravel на этот раз проверит и полностью пропустит этот блок if, потому что на этот раз это удобно не Ajax-запрос.

Итак, что здесь сделано? У меня есть только один объект Request, который обрабатывает проверку. Мне не нужно беспокоиться о поддержке кода проверки как в JS (Front), так и в Laravel (Back), у меня есть только одно место для этого. Я использую идеальный процесс проверки Laravel, который я хорошо знаю, и, наконец, что не менее важно, у меня нет обновления страницы после проверки, поэтому он кажется быстрым. Два HTTP-запроса для этого действительно не проблема, выигрыш в этом случае важнее.

Я думаю, вы можете легко настроить это, если действительно хотите сделать запрос Ajax во второй раз.

Надеюсь, вам было интересно, если у вас есть другой подход, я хотел бы услышать об этом :-)

! Обновлять !

Мой дорогой друг Кириакос (также входящий в основную команду сообщества laravel.gr) подготовил скелет этим методом по адресу https://github.com/kyrpas/vuejs-laravel-validation. Большое спасибо, дружище, я уверен, что это очень поможет :-)