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

Question

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

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

При правильном, был зеленый

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

            Vue.component('task-element',{
        props: [ 'task' ],
        data : function () {
           var d = {seconds_elapsed: null}; 
           return d;
        },
        methods: {
           timer() {
              this.seconds_elapsed = (Date.now() - this.task.startTime) / 1000 | 0;
              setTimeout(this.timer, 1000);
           }
        },
        created() {
           if (!this.task.startTime)
              this.$set(this.task, 'startTime', Date.now());
           this.timer();
        },
        template : `
        <li>
        <label :class="{ islong: task.text.length >= 15 }">
           <input type="checkbox" v-model="done">
           <span>{{ task.text }}</span>
           <small>{{ seconds_elapsed }} seconds ago</small>
        </label>
        <button v-if="task.done" @click="$emit('delete')">delete</button>
        </li>`,
        computed: {
           done: {
              get() {
              return this.task.done;
              },
              set(done) {
              this.$emit('update', { done });
              },
           },
        },
        });

        new Vue({
        el: '#app',
        data: {
           newTodo: '',
           todos: [
              { id: 1, text: 'Task 1', done: false },
              { id: 2, text: 'Task 2', done: false },
              { id: 3, text: 'Task 3', done: true },
           ],
           data_is_loaded: true,
        },
        methods: {
           addTodo() {
           if(this.newTodo.length > 10) {
              const text = this.newTodo;
              if (text.length) {
              this.todos.push({
                 id: 1 + Math.max(0, ...this.todos.map(n => n.id)),
                 text,
                 done: false,
              });
              this.newTodo = '';
              } else {
              alert('empty');
              }
           }},
        },
        });

Answer 1

Что касается подсветки границ input, то нужно забайндить style или класс в котором будет прописаны соответствуюшие стили, все это можно еще связать с computed (вычисляемыми) свойствами:

:style = "[newTodo.length > 10 ? {'border-color': 'green'} : {'border-color': 'red'}]"


:class="[newTodo.length > 10? activeClass : errorClass]"

А у кнопки необходимо связать атрибут disabled:

<button type="button" v-bind:disabled = "newTodo.length < 10" @click="addTodo">Add task</button>

в стилях можете через псевдокласс прописать стили какие нужны для кнопки в неавктивном режиме:

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

БЛОГ НА HUSL

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

Ответы (1 шт):