Объект с валидацией

Принцип совершенно такой же, как и в примитиве.

Так что я решила показать более интересный пример, чтобы можно было понять, что можно сделать с этой технологией. Давайте сделаем класс, который будет проводить валидацию полей в форме.

Класс

class ValidatedForm {
  /**
   * В нашей форме будет 2 поля:
   *  - `firstname` для ввода имени (доступны только буквы)
   *  - `age` для ввода возраста (доступны только цифры)
   */
  _form = {
    firstName: '',
    age: '',
  }

  /**
   * Здесь мы будем собирать наши ошибки
   */
  errors = {
    firstName: '',
    age: '',
  }

  get form() {
    return new Proxy(this._form, {
      set: (obj, prop, value) => {
        // Обработка firstName
        if (prop === 'firstName') {
          // Проверяем все ли символы являются буквами
          if (/^[a-zа-яё]*$/i.test(value)) {
            // Обнуляем ошибку при валидном значении
            this.errors.firstName = '';
          } else {
            // Записываем ошибку, если значение не валидно
            this.errors.firstName = 'Доступны только буквы';
          }
        }

        // Обработка age
        if (prop === 'age') {
          // Проверяем все ли символы являются цифрами
          if (/^\d*$/.test(value)) {
            this.errors.age = '';
          } else {
            this.errors.age = 'Доступны только цифры';
          }
        }

        /**
         * Записываем значение в любом случае
         * Мы не запрещаем пользователю вписывать поля, а лишь сигнализируем
         * что с ними что-то не так
         */
        obj[prop] = value;
        // Сигнализируем, что все прошло успешно
        return true;
      }
    })
  }
}

const instance = new ValidatedForm();

export default instance;

WARNING

Обратите внимание на стрелочную функцию в выделенной строке, это необходимо если вы обращаетесь к полям из класса в валидаторе

Компонент

Давайте теперь посмотрим, как преобразится наш компонент

<template>
  <div class="component-block">
    <span class="name">ValidatedForm</span>

    <p>
      <input
        v-model="form.firstName"
        placeholder="Имя"
        :class="{ 'error': errors.firstName }"
      /><br/>
      <span v-if="errors.firstName" class="error">
        {{ errors.firstName }}
      </span>
    </p>

    <p>
      <input
        v-model="form.age"
        placeholder="Возраст"
        :class="{ 'error': errors.age }"
      /><br />
      <span v-if="errors.age" class="error">
        {{ errors.age }}
      </span>
    </p>
  </div>
</template>

<script>
import ValidatedForm from '@example-services/ValidatedForm';

export default {
  data() {
    return {
      form: ValidatedForm.form,
      errors: ValidatedForm.errors,
    };
  },
}
</script>

Обратите внимание на то, что компонент стал чистым и понятным, вся логика ушла в сервис.

Результат

Давайте посмотрим на то, как наша форма себя ведет

ValidatedForm