Интеграция с Vue.js

Validator.js представляет собой набор чистых функций для проверки строковых значений и базовых типов данных. Библиотека не навязывает архитектуру и легко встраивается в любые JavaScript-приложения, включая приложения на Vue.js, где реактивность и управление состоянием форм требуют аккуратной организации логики валидации.

Vue.js предоставляет реактивную модель данных, вычисляемые свойства и наблюдатели, что позволяет строить валидацию как синхронную реакцию на изменение состояния формы. В сочетании с Validator.js это формирует гибкую систему проверки данных без необходимости подключения тяжёлых фреймворков валидации.

Подключение Validator.js в проект Vue.js

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

npm install validator

После установки функции импортируются точечно, чтобы уменьшить размер бандла:

import isEmail from 'validator/lib/isEmail'
import isLength from 'validator/lib/isLength'

Такой подход предпочтителен при использовании Vue CLI или Vite, поскольку позволяет избежать загрузки всей библиотеки целиком.

Организация валидации в Options API

В классической модели Vue компонента валидация часто реализуется через computed-свойства и методы.

Пример структуры формы

import isEmail from 'validator/lib/isEmail'

export default {
  data() {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },
  computed: {
    emailError() {
      if (!this.form.email) {
        return 'Поле обязательно'
      }
      if (!isEmail(this.form.email)) {
        return 'Некорректный email'
      }
      return ''
    }
  }
}

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

Реактивная валидация через Composition API

В современных приложениях на Vue 3 предпочтение отдаётся Composition API, где логика валидации становится более изолированной.

import { reactive, computed } from 'vue'
import isLength from 'validator/lib/isLength'

export function useFormValidation() {
  const form = reactive({
    username: '',
    password: ''
  })

  const usernameError = computed(() => {
    if (!isLength(form.username, { min: 3 })) {
      return 'Минимальная длина — 3 символа'
    }
    return ''
  })

  const passwordError = computed(() => {
    if (!isLength(form.password, { min: 6 })) {
      return 'Минимальная длина — 6 символов'
    }
    return ''
  })

  return {
    form,
    usernameError,
    passwordError
  }
}

Такой подход позволяет повторно использовать логику валидации в разных компонентах без дублирования кода.

Интеграция через методы и события ввода

Иногда валидация выполняется не через computed, а через методы, привязанные к событиям формы.

import isEmail from 'validator/lib/isEmail'

export default {
  data() {
    return {
      email: '',
      emailError: ''
    }
  },
  methods: {
    validateEmail() {
      if (!isEmail(this.email)) {
        this.emailError = 'Email некорректен'
      } else {
        this.emailError = ''
      }
    }
  }
}

Использование событий input или blur позволяет контролировать момент выполнения проверки, снижая нагрузку при больших формах.

Директивы для упрощения логики в шаблоне

Vue.js позволяет выносить валидацию в пользовательские директивы, что уменьшает количество кода внутри компонентов.

import isEmpty from 'validator/lib/isEmpty'

export default {
  mounted(el, binding) {
    el.addEventListener('blur', () => {
      const value = el.value
      const error = isEmpty(value) ? binding.value.message : ''
      binding.value.setError(error)
    })
  }
}

Такой механизм подходит для повторяющихся полей, где логика проверки одинакова.

Асинхронная и условная валидация

Validator.js ориентирован на синхронные проверки, однако в связке с Vue можно строить гибридные сценарии, включая асинхронные запросы.

import isEmail from 'validator/lib/isEmail'

async function checkEmailExists(email) {
  const response = await fetch(`/api/check-email?email=${email}`)
  return response.ok
}

export default {
  data() {
    return {
      email: '',
      error: ''
    }
  },
  watch: {
    async email(newValue) {
      if (!isEmail(newValue)) {
        this.error = 'Некорректный формат'
        return
      }

      const exists = await checkEmailExists(newValue)
      this.error = exists ? 'Email уже используется' : ''
    }
  }
}

Watchers позволяют реагировать на изменения состояния и комбинировать локальную и серверную валидацию.

Композиция правил валидации

При усложнении форм удобно строить наборы правил как отдельные функции:

import isLength from 'validator/lib/isLength'
import isAlphanumeric from 'validator/lib/isAlphanumeric'

export function validateUsername(value) {
  if (!isLength(value, { min: 3 })) return 'Слишком короткий логин'
  if (!isAlphanumeric(value)) return 'Только буквы и цифры'
  return ''
}

Далее функция используется в любом компоненте без привязки к Vue:

computed: {
  usernameError() {
    return validateUsername(this.username)
  }
}

Интеграция с v-model и двусторонним состоянием ошибок

При использовании v-model удобно синхронизировать значение и ошибку через объект состояния:

import isEmail from 'validator/lib/isEmail'

export default {
  data() {
    return {
      form: {
        email: '',
        errors: {
          email: ''
        }
      }
    }
  },
  watch: {
    'form.email'(value) {
      this.form.errors.email = isEmail(value)
        ? ''
        : 'Ошибка формата email'
    }
  }
}

Такой подход позволяет централизованно хранить состояние формы.

Производительность и оптимизация валидации

При больших формах важно избегать лишних пересчётов. Vue реактивность может вызывать частые обновления, поэтому применяются:

  • дебаунсирование ввода
  • мемоизация вычислений
  • точечный импорт функций Validator.js

Пример дебаунса:

import isEmail from 'validator/lib/isEmail'

let timeout

export default {
  data() {
    return {
      email: '',
      error: ''
    }
  },
  methods: {
    onInput() {
      clearTimeout(timeout)

      timeout = setTimeout(() => {
        this.error = isEmail(this.email)
          ? ''
          : 'Неверный email'
      }, 300)
    }
  }
}

Масштабирование логики валидации в больших приложениях

В крупных проектах Vue логика проверки часто выносится в отдельные слои:

  • services/validation
  • composables/useValidation
  • utils/rules

Validator.js при этом остаётся низкоуровневым инструментом, выполняющим только проверку значений, тогда как Vue-компоненты управляют состоянием интерфейса.

Разделение ответственности позволяет избежать смешивания UI-логики и бизнес-правил, сохраняя предсказуемость поведения форм при росте приложения.

Оглавление