deadloop
@deadloop
Активно осваиваю PHP

Как правильно сделать валидацию формы Vue?

Мне нужно сделать валидацию формы.

1. При создании задачи, не менее 10 символов. Красный бордер.
5ecd3bc017bcd994761891.png

2. При правильном, был зеленый
5ecd3c1453935406023570.png

3. И что бы кнопка была не активна пока не введут корректное значение.
5ecd3c3d06a6f675584094.png

Тут Код jsfiddle
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
computed: {
  newTodoValid() {
    return this.newTodo.length >= 10;
  },
},

<input :class="newTodoValid ? 'valid' : 'not-valid'">
<button :disabled="!newTodoValid">

.valid {
  border: 2px solid green;
}

.not-valid {
  border: 2px solid red;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@olenkill2
Переверстальщик-недофронтендер
Если форм много, то советую использовать плагин vee-validate
Легкий, гибкий. В общем крутая штука. Но это если форм больше, чем одна)
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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