coderisimo
@coderisimo

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

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

Спасибо.
  • Вопрос задан
  • 750 просмотров
Решения вопроса 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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Artem0071
Безработный mr. Junior
Есть метод watch
Просто следите за формой вцелом с помощью него
Ответ написан
Комментировать
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Если нужно по каждому изменению в поле отправлять данные на сервер, то я бы тоже посмотрел в сторону отдельного поля-компонента, который может работать с сервером. В компоненте на изменение поля, через debounce отправляете данные на сервер, ловите ответ и обрабатываете его как нужно в компоненте, показывая ошибки и т.п.
Так вы сможете потом вставить этот компонент в любое место, указав в качестве входного параметра адрес куда отправлять данные из этого поля.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы