CODEGURU

Валидация форм с vue.js – делаем удобнее форму редактирования

Элементарная форма редактирования. Что мы хотим сделать? Мы хотим возвращать полю его изначальное значение при нажатии клавиши ESC и при потере полем фокуса, если оно пустое. Так что для начала нам нужно куда-то сохранить эти самые изначальные значения. Для этого добавим в data объект backup, в который при загрузке компонента будем сохранять копию данных, полученных с сервера:

export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      },

      backup: {}
    }
  },

  mounted() {
    this.user.name = 'John';
    this.user.email = 'john@test.com';
    this.backup = { ...this.user };
  }
};

Теперь напишем метод для восстановления изначального значения поля:

restoreField(value, field) {
  this.user[field] = this.backup[field];
}

И метод для проверки пустое поле или нет:

checkEmpty(value, field) {
  if (!value.trim()) {
    this.restoreField(value, field)
  }
}

Добавим эти методы к полям формы и вот финальный результат:

<template>
  <div id="app">
    <form>
      <div class="form__row">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="form__control" v-model="user.name" @keydown.esc="restoreField(user.name, 'name')" @change="checkEmpty(user.name, 'name')">
      </div>
      <div class="form__row">
        <label for="email">Email</label>
        <input type="email" name="email" id="email" class="form__control" v-model="user.email" @keydown.esc="restoreField(user.email, 'email')" @change="checkEmpty(user.email, 'email')">
      </div>
    </form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      },

      backup: {}
    }
  },

  mounted() {
    this.user.name = 'John';
    this.user.email = 'john@test.com';
    this.backup = { ...this.user };
  },

  methods: {
    restoreField(value, field) {
      this.user[field] = this.backup[field];
    },

    checkEmpty(value, field) {
      if (!value.trim()) {
        this.restoreField(value, field)
      }
    }
  }
};
</script>

Совсем немного кода, но форма редактирования, как мне кажется, стала немного удобней и, что главное, она стала более дружелюбной.