Валидация форм с 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>
Совсем немного кода, но форма редактирования, как мне кажется, стала немного удобней и, что главное, она стала более дружелюбной.