Валидация на сервере каждого поля формы с использованием Vue. Оптимальное решение?

Question

[coderisimo]

Есть 15 полей. При изменении каждого нужно отправлять запрос о валидации на сервер. Использую Vue. Думаю создать computed поля по количеству валидируемых полей. Может, есть более элегантный вариант?
Например, на jQuery я бы написал одну функцию, которая из атрибута валидируемого поля брала бы все что нужно и после получения ответа с сервера изменяла бы вид валидуемого поля в зависимости от результатов валидации. А с Vue.... Делать 15 computed полей это как-то совсем не ахти получается (((

Спасибо.

Answer 1

[RaulDuke]

Подумайте в сторону универсального компонента для инпута.

Что-то такое:

<template>

    <input type="text"
      :placeholder="placeholder"
      :value="value"
      @input="onchange">
    <app-transition type="toggleDown">
      <div>{{ notify }}</div>
    </app-transition>
</template>

<script>
  export default {
    name: 'app-input',
    props: ['type', 'value', 'placeholder'],
    computed: {
      notify() {
        let text = 'Поле может содержать только ';
        return ( this.type === 'tel' &&  text + 'цифры' )
            || ( this.type === 'page' && text + 'латинские буквы, цифры (не менее 6 символов)' )
            || ( this.type === 'name' && text + 'русские и латинские буквы, цифры (не менее 3 символов)' )
      },
      validation(value) {
        return {
          tel: (/^[0-9]+$/).test(this.value) || !this.value.length,
          page: (/^[a-z0-9]+$/i).test(this.value) && this.value.length > 5,
          name: (/^[a-zа-яA-ZА-Я0-9 ]+$/i).test(this.value) && this.value.length > 3
        }
      }
    },
    methods: {
      onchange(e) {
        if ( this.validation[this.type] ) {
          this.$emit('input', e.target.value);
        }
      }
    }
  }
</script>

Comments

[furrya_black]

Или прикрутите vee-validate

[coderisimo]

Спасибо за ответы. Задача , как указано выше, серверная валидация.

[RaulDuke]

Этот метод написан не потому что я проигнорил вводные, а потому что я не знаю вашего API.

validation(value) {
        return {
          tel: (/^[0-9]+$/).test(this.value) || !this.value.length,
          page: (/^[a-z0-9]+$/i).test(this.value) && this.value.length > 5,
          name: (/^[a-zа-яA-ZА-Я0-9 ]+$/i).test(this.value) && this.value.length > 3
        }
      }

[coderisimo]

RaulDuke:
Да -да.. Спасибо за возможное решение. Мне любые варианты интересны.
Просто пока это выглядит сложнее чем решение на jQ .
Мне нужно отправлять запрос на сервер. Какой не важно. Для запроса мне нужно получать имя поля и его содержимое. И еще момент. нельзя отправлять миллион запросов в секунду. Т.е запросы должны следовать с небольшим запаздыванием. Вот и возникает искушение написать по-старинке )))

[coderisimo]

RaulDuke: полагаю, могу написать и без компонента. через эвент в onchange(e) получу атрибут из измененного поля, сформирую запрос к серверу и получив ответ буду знать в какому элементу применять зависящие от результатов валидации изменения стиля. Нужно только понять , как фильтровать события изменения содержимого поля (то что делает debounce в _underscore) , чтобы запросы отправлялись с некоторой задержкой

[RaulDuke]

coderisimo: расскажите немного подробнее физику процесса, как что происходит с данными после валидации, вы их сразу пишите или что-то еще происходит? Может ли бэк записать их все одним запросом, какие сущности в инпутах и т.д.?

[coderisimo]

RaulDuke:
Все просто .
кратко : пользователь меняет данные в инпуте. данные из инпута отправляются на сервер. сервер присылает ОК или FALSE (результат валидации) , мы меняем заголовок инпута на красный в случае ошибки.
Напишу миксин (ну хочу сильно переписывать имеющуюся разметку, для использования компонента)_, который можно будет прикрутить к любой форме в дальнейшем. _underscore не такой большой, буду использовать его , что разряжение кол-ва запросов к серверу

[RaulDuke]

coderisimo: если вы ограничены количеством запросов, может тогда вешать на инпут disable с анимацией лоадера и setTimeout. Не самое изящное решение конечно.

[JSmitty]

А что мешает так же воспользоваться _.throttle и _.debounce, коль все равно валидация асинхронная? Если у вас фронт собирается, вы можете импортировать конкретно только нужную функцию, и не волочь всю библиотеку. Кастомный инпут-компонент в вашем случае мне тоже кажется предпочтительным вариантом.

Answer 2

[Artem0071]

Есть метод watch
Просто следите за формой вцелом с помощью него

Answer 3

[Evgeny Kulakov]

Если нужно по каждому изменению в поле отправлять данные на сервер, то я бы тоже посмотрел в сторону отдельного поля-компонента, который может работать с сервером. В компоненте на изменение поля, через debounce отправляете данные на сервер, ловите ответ и обрабатываете его как нужно в компоненте, показывая ошибки и т.п.
Так вы сможете потом вставить этот компонент в любое место, указав в качестве входного параметра адрес куда отправлять данные из этого поля.