Поле серия содержит ошибку ввода

Вопросы и ответы — Евробайт

Ошибка: Серия и номер имеет неверное значение

В каком формате вводить серию и номер паспорта??

14.09.2018   13:14
Пользователь ID 109956

ОТВЕТЫ НА ВОПРОС (1)

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

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

Еще одним полезным подходом является предупреждение пользователя о возможных ошибках еще до того, как он начнет вводить данные. Например, можно добавить подсказки или маски для конкретных полей, чтобы пользователь знал, какой формат данных требуется вводить. Это поможет избежать ошибок и сократить количество неправильных вводов.

Как исправить неверное значение в поле ввода

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

Первое, что следует сделать, это внимательно прочитать ошибку или сообщение об ошибке, которое появляется при попытке отправки формы. В сообщении может быть указано, какая именно ошибка была допущена и как ее исправить.

Если ошибка связана с неправильным форматом данных, например, с неверно введенным адресом электронной почты или номером телефона, то следует внимательно проверить введенные данные и исправить их. Необходимо убедиться, что все символы введены корректно и нет лишних пробелов.

Если ошибки связаны с выбором варианта из списка или чекбокса, следует просмотреть доступные варианты и выбрать правильный. Если в списке нет нужного варианта, возможно, придется выбрать наиболее близкий по смыслу или обратиться за помощью к администратору сайта.

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

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

Наконец, необходимо убедиться, что все исправления были внесены правильно и повторно проверить поля ввода перед отправкой формы. И только после этого можно нажимать кнопку «Отправить» или «Продолжить».

Почему важно внимательно проверять введенные данные

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

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

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

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

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

Советы по предотвращению ошибок при вводе данных

Когда мы вводим данные в поле ввода, всегда существует вероятность ошибки. Но с помощью некоторых советов можно значительно снизить риск неправильного ввода данных.

1. Внимательно проверяйте данные перед отправкой. Прежде чем нажимать кнопку «Отправить» или «Готово», убедитесь, что все данные введены правильно. Проверьте, нет ли опечаток или лишних символов.

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

3. Используйте клавишу «Tab» для перехода между полями. Клавиша «Tab» позволяет быстро переключаться между полями ввода. Это помогает избежать пропуска или повторного ввода данных.

4. Обратите внимание на формат данных. Некоторые поля ввода имеют определенный формат данных, например, дату или номер телефона. Убедитесь, что вы вводите данные в правильном формате, чтобы избежать ошибок.

5. Не спешите. Иногда ошибки происходят из-за торопливости. Постепенно и внимательно вводите данные, чтобы избежать неправильного ввода.

6. Пользуйтесь проверкой на ошибки. Если возможно, используйте встроенные функции проверки на ошибки при вводе данных. Это может помочь выявить и исправить ошибки до отправки данных.

7. Обратите внимание на заглавные и строчные буквы. В некоторых случаях регистр букв может играть роль. Убедитесь, что вы правильно вводите заглавные и строчные буквы, особенно при вводе паролей или имен.

8. Запоминайте важные данные. Если вам приходится часто вводить одни и те же данные, попробуйте запомнить их или сохранить в надежном месте. Это позволит избежать ошибок и сэкономит время при вводе данных в будущем.

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

Как избежать неверных данных в поле ввода

Ошибки ввода данных в поле ввода могут привести к непредсказуемым последствиям и негативно сказаться на работе приложения или веб-сайта. Чтобы избежать неверных данных, следует применять несколько полезных методов и техник.

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

2. Отображение подсказок: Для помощи пользователям в правильном заполнении полей ввода можно использовать подсказки. Подсказки могут быть представлены в виде текста, иконок или всплывающих подсказок, которые объясняют, какие данные требуется ввести и какой формат следует использовать.

3. Ограничение символов: Ограничение символов в поле ввода может помочь предотвратить некорректные или излишние данные. Например, можно установить ограничение на количество символов или на тип символов, которые могут быть введены в поле.

4. Проверка на наличие ошибок: После ввода данных в поле следует провести проверку на наличие ошибок. Если данные не соответствуют заданным критериям, пользователю должно быть предоставлено сообщение об ошибке с указанием причины ошибки и подсказкой о том, как ее исправить.

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

Применение этих методов позволит повысить точность и надежность ввода данных в поля ввода, улучшить пользовательский опыт и избежать непредвиденных ошибок в приложениях и веб-сайтах.

Что делать, если неверное значение в поле ввода привело к ошибке

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

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

Далее, нужно предоставить пользователю возможность исправить ошибку. Это можно сделать путем очистки поля ввода или позволить пользователю ввести новое значение. Важно, чтобы пользователь понимал, что он должен сделать, чтобы исправить ошибку.

Если пользователь не понимает, в чем заключается ошибка или как исправить ее, можно предоставить дополнительные подсказки. Например, можно добавить ссылку на страницу с инструкцией или подробным описанием требований к полю ввода.

Кроме того, следует учитывать, что некорректное значение в поле ввода может быть связано с неверным форматом данных или ограничениями (например, минимальное или максимальное значение). В таком случае, в сообщении об ошибке можно указать конкретные требования к полю ввода и пояснить, почему введенное значение неправильно.

Лучшие практики по проверке корректности введенных данных

1. Валидация на стороне клиента: Одной из наиболее распространенных практик является валидация данных на стороне клиента при помощи JavaScript. Это позволяет проверить данные непосредственно в момент ввода пользователем, без необходимости отправки формы на сервер. Такая проверка может быть полезна для предотвращения некорректного ввода данных и предоставления обратной связи пользователю в реальном времени.

2. Валидация на стороне сервера: Помимо валидации на стороне клиента, также важно проводить проверку корректности введенных данных на стороне сервера. Это необходимо для того, чтобы предотвратить возможность внесения некорректных данных в базу данных или другие системы. Валидация на стороне сервера может быть использована для проверки данных, которые не могут быть проверены на стороне клиента или для дополнительной проверки данных, введенных пользователем.

3. Использование регулярных выражений: Регулярные выражения являются мощным инструментом для проверки корректности введенных данных. Они позволяют задать шаблон, который должен соответствовать введенным данным, и проверить, соответствуют ли данные этому шаблону. Регулярные выражения могут быть использованы для проверки правильности формата email адреса, номера телефона, пароля и других типов данных.

4. Дружественные сообщения об ошибках: Важным аспектом проверки корректности введенных данных является предоставление пользователю понятных и информативных сообщений об ошибках. Вместо общих фраз типа «Ошибка валидации» или «Пожалуйста, исправьте ошибку» следует предоставить пользователю информацию о том, какие именно ошибки были допущены и что нужно исправить. Это поможет пользователю быстро понять, что именно нужно исправить, и улучшит общую пользовательскую опыт.

5. Использование списков ошибок: Вместо вывода всех ошибок сразу, полезно предоставлять пользователю список ошибок, с указанием конкретного поля, в котором была допущена ошибка. Это позволит пользователю сосредоточиться на исправлении конкретных ошибок и упростит процесс валидации данных. Кроме того, список ошибок может быть представлен в виде ссылок, позволяющих пользователю быстро переместиться к соответствующему полю для исправления ошибки.

6. Тестирование различных сценариев: Важно проводить тестирование на различных сценариях использования, чтобы убедиться, что все возможные ошибки валидации обрабатываются корректно. Например, следует проверить, что ввод некорректных символов вызывает соответствующую ошибку, что ввод слишком длинных данных обрабатывается правильно, и так далее. Тестирование поможет выявить потенциальные проблемы с проверкой корректности введенных данных и улучшить качество приложения.

7. Уведомление о сохранении данных: Если введенные данные прошли проверку на корректность, полезно предоставить пользователю уведомление о том, что данные были успешно сохранены или приняты. Такое уведомление может быть представлено в виде сообщения об успешной отправке формы или всплывающего окна с подтверждением. Это поможет пользователю быть уверенным, что его данные были успешно обработаны системой и не потерялись.

Последствия неверно введенных данных в поле ввода

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

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

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

Для предотвращения негативных последствий от неверно введенных данных в поле ввода, веб-разработчики и дизайнеры должны предусмотреть механизмы проверки и валидации введенной информации. Например, они могут использовать различные встроенные функции для проверки правильности формата введенных данных (например, проверка наличия ‘@’ в адресе электронной почты) или выводить сообщения об ошибках и подсказки для пользователя при неправильном заполнении полей.

Время на прочтение
11 мин

Количество просмотров 73K

Привет, Хабр!

Валидация форм — одна из самых важных задач на сайте. Нам приходится валидировать данные на присутствие, на совпадение по паттерну, создавать асинхронные валидации, применять валидации только после снятия фокуса с поля или перед отправкой формы… Порой это становится настоящей головной болью для разработчика.

Vue.js содержит много интересных и необычных подходов к валидации, которые помогут решить ваши проблемы. Обзор под катом!

TL;DR

Используйте Vuelidate.

Частые ошибки

Валидации с помощью средств HTML5

HTML5 дал разработчикам возможность валидации форм с помощью новых атрибутов для полей и Validation API. Мы можем использовать их прямо в наших vue-шаблонах.

Вот, например, простая форма регистрации, состоящая из трех полей: поля для электронной почты, для пароля и повтора пароля. Для первых двух мы используем валидации с помощью атрибутов, для третьего — с помощью атрибутов и Validation API:

<template>
  <form @submit.prevent="someAction()">
    <input v-model="email" type="email" required>
    <input v-model="password" type="password" required>
    <input v-model="repeatedPassword" type="password" required ref="repeatedPasswordEl">

    <button type="submit">
      Отправить форму
    </button>
  </form>
</template>

<script>
export default {

  data() {
    return {
      email: null,
      password: null,
      repeatedPassword: null,
    };
  },

  watch: {
    repeatedPassword: 'checkPasswordsEquality',
    password: 'checkPasswordsEquality',
  },

  methods: {
    checkPasswordsEquality() {
      const { password, repeatedPassword } = this;
      const { repeatedPasswordEl } = this.$refs;

      if (password !== repeatedPassword) {
        repeatedPasswordEl.setCustomValidity(
          'Пароли должны совпадать',
        );
      } else {
        repeatedPasswordEl.setCustomValidity('');
      }
    },
  },

};
</script>

Песочница с примером

Даже в таком простом примере можно увидеть много проблем:

• Браузеры показывают только одну ошибку за один раз. Пользователю придется пытаться отправить форму несколько раз, чтобы увидеть все свои ошибки.
• Ошибки отображаются пользователю только после попытки отправки формы. Для изменения этого поведения придется написать еще тонну кода: вызывать у каждого элемента по событию blur функцию reportValidity().
• Для стилизации полей ввода существуют только псевдоклассы :valid и :invalid, нет возможности поймать состояние, когда данные в поле ввода неверны, но пользователь еще не взаимодействовал с ним.
• Каждый браузер отображает ошибки валидации по-своему, они могут выглядеть некрасиво в вашем дизайне.
• Validation API во Vue.js неудобно использовать: приходится сохранять элементы в $refs.

Если у вас в проекте всего одна форма, и та используется только вами, то HTML5 валидации — отличный выбор. Во всех остальных остальных случаях старайтесь использовать другие подходы.

Валидации без использования библиотек

Другая частая проблема, которую я встречаю в проектах — валидации без использования библиотек.

<template>
  <form @submit.prevent="someAction()">
    <input
      v-model="email"
      type="email"
      @blur="isEmailTouched = true"
      :class="{ error: isEmailError }"
    >
    <div v-if="isEmailError">
      Поле заполено неверно
    </div>

    <button :disabled="!isEmailValid" type="submit">
      Отправить форму
    </button>
  </form>
</template>

<script>
const emailCheckRegex = /^...Длинный RegExp для валидации Email...$/;

export default {

  data() {
    return {
      email: null,
      isEmailTouched: false,
    };
  },

  computed: {
    isEmailValid() {
      return emailCheckRegex.test(this.email);
    },

    isEmailError() {
      return !this.isEmailValid && this.isEmailTouched;
    },
  },

};
</script>

Песочница с примером

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

Лучший выход из всех проблем — пользоваться библиотеками, которые предлагает нам сообщество. На текущий момент есть два популярных решения для валидации форм:

• vee-validate (GitHub, документация)
• Vuelidate (GitHub, документация)

Каждая имеет свой уникальный подход, которые мы подробно рассмотрим ниже.

vee-validate

vee-validate — библиотека для валидаций, появившаяся во времена Vue.js первой версии, имеет большое сообщество и используется в большом количестве проектов.

Возраст сказывается на весе — 31 КБайт (minified+GZIP), в полтора раза больше самого Vue.js! Связано это с тем, что библиотека содержит в себе сразу кучу вещей:

• 35 встроенных валидаторов
• Перевод ошибок на английский язык
• Директивы для валидаций
• Компоненты для валидаций

Библиотека поддерживает 41 язык для ошибок. Чтобы установить и использовать ее с нужной локализацией, требуется выполнить всего пару шагов:

npm i vee-validate

/* main.js */

import Vue from 'vue';
import VeeValidate, { Validator } from 'vee-validate';
import ru from 'vee-validate/dist/locale/ru';

Validator.localize('ru', ru);
Vue.use(VeeValidate, {
  locale: 'ru',
});

/* ... */

У vee-validate есть два подхода к валидациям: с помощью директивы и с помощью компонентов.

Валидация с помощью директивы v-validate

Подход с помощью директивы очень прост: вы вешаете на поле ввода директиву v-validate, которой передаете список валидаторов. Состояние валидации и строчки ошибок затем можно получить из полей fields и errors внутри компонента.

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

— Содержит поле «Серия и номер паспорта»
— Содержит поле «Дата выдачи паспорта»
— Содержит поле «Имя»
— Добавляет атрибут disabled на кнопку отправки формы если данные неверны

<template>
  <form @submit.prevent="someAction()">
    <div>
      <!--
        Ошибка в поле будет отображена сразу после начала ввода в него данных

        data-vv-as - атрибут для кастомизации названия поля в строчке с ошибкой
        name - название поля внутри объекта валидатора
      -->
      <input
        type="text"
        v-model="passportData"
        v-validate="{ required: true, regex: /^\d{4} \d{6}$/ }"
        data-vv-as="серия и номер паспорта"
        name="passport_data"
      >
      <span v-if="errors.has('passport_data')">
        {{ errors.first('passport_data') }}
      </span>
    </div>

    <div>
      <!--
        По дефолту все ошибки отобразятся как только вы начнете вводить данные.
        Для изменения этого поведения используйте v-model-модификатор lazy
        или флаги валидации внутри fields.passport_date

        Флаг invalid означает то, что данные в поле неправильные
        Флаг touched означает, что поле ввода создало событие blur
      -->
      <input
        type="text"
        v-model.lazy="passportDate"
        v-validate="{ required: true, date_format: 'dd.MM.yyyy' }"
        data-vv-as="дата выдачи паспорта"
        name="passport_date"
      >
      <span 
        v-if="fields.passport_date 
          && fields.passport_date.touched 
          && fields.passport_date.invalid"
      >
        {{ errors.first('passport_date') }}
      </span>
    </div>

    <div>
      <!--
        Если хотите отобразить сразу все ошибки поля,
        то используйте модификатор continues и метод errors.collect()
      -->
      <input
        type="text"
        v-model="name"
        v-validate.continues="{ required: true, alpha: true, max: 10 }"
        data-vv-as="имя"
        name="name"
      >
      <span
        v-for="error in errors.collect('name')"
        :key="error"
      >
        {{ error }}
      </span>
    </div>

    <button 
      type="submit"
      :disabled="!isFormValid"
    >
      Отправить форму
    </button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      passportData: null,
      name: null,
      passportDate: null,
    };
  },

  computed: {
    // Проверяем, что каждое поле формы валидно
    isFormValid () {
      return Object.keys(this.fields).every(field => this.fields[field].valid);
    },
  },
};
</script>

Песочница с примером

Как можно было заметить, при использовании флагов внутри fields.passport_date пришлось проверить поле passport_date на присутствие — во время первого рендера у vee-validate нет информации о ваших полях и, соответственно, нет объекта с флагами. Чтобы избавиться от этой проверки, используйте специальный хелпер mapFields.

Валидации с помощью компонентов

Новый способ валидации, который появился в конце прошлого года — использование компонентов. Сами авторы рекомендуют использовать этот подход, и он отлично сочетается с новым синтаксисом слотов из Vue.js@2.6.

Библиотека предоставляет два компонента:

• ValidationProvider — компонент, в котором вы описываете валидации и в который оборачиваете поле ввода.
• ValidationObserver — компонент, который объединяет флаги валидаций нескольких ValidationProvider’ов.

Вот форма из прошлого примера, но написанная с помощью компонентов:

<template>
  <!--
    ValidationObserver передает дефолтному слоту все флаги валидаций.
    В примере используется только флаг valid для стилизации кнопки отправки формы
  -->
  <ValidationObserver v-slot="{ valid }">
    <form @submit.prevent="doAction()">
      <!--
        ValidationProvider добавляет обработчики на все поля ввода внутри слота
        и передает слоту все ошибки и флаги валидации

        name - атрибут, который будет отображаться в ошибках
      -->
      <ValidationProvider
        name="серия и номер паспорта"
        :rules="{ required: true, regex: /^\d{4} \d{6}$/ }"
        v-slot="{ errors }"
      >
        <input type="text" v-model="passportData">
        <span v-if="errors[0]">
          {{ errors[0] }}
        </span>
      </ValidationProvider>

      <!--
        По дефолту валидация данных сработает сразу после события input,
        для валидации после blur или change используйте mode="lazy" или mode="eager"
      -->
      <ValidationProvider
        name="дата выдачи паспорта"
        :rules="{ required: true, date_format: 'dd.MM.yyyy' }"
        v-slot="{ errors }"
        mode="lazy"
      >
        <input type="text" v-model="passportDate">
        <span v-if="errors[0]">
          {{ errors[0] }}
        </span>
      </ValidationProvider>

      <!--
        Если хотите отобразить сразу все ошибки поля,
        то используйте входной параметр :bails="false"
      -->
      <ValidationProvider
        name="имя"
        :rules="{ required: true, alpha: true, max: 10 }"
        v-slot="{ errors }"
        :bails="false"
      >
        <input type="text" v-model="name">
        <span
          v-for="error in errors"
          :key="error"
        >
          {{ error }}
        </span>
      </ValidationProvider>

      <button type="submit" :disabled="!valid">
        Отправить форму
      </button>
    </form>
  </ValidationObserver>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate';

export default {
  components: {
    ValidationProvider,
    ValidationObserver,
  },

  data() {
    return {
      passportData: null,
      passportDate: null,
      name: null,
    };
  },
};
</script>

Песочница с примером

Остальные возможности библиотеки

• Интеграция с VueI18n
• Автодобавление классов для стилизации
• Поддержка :valid и :invlaid псевдоклассов
• Поддержка aria-* атрибутов
• Поддержка HTML5 атрибутов для валидации
• Создание кастомных валидаторов
• Поддержка асинхронных валидаций

Проблемы

Первая и самая большая проблема — это, конечно же, ее размер. Библиотека не поддерживает tree-shaking и выборочное добавление валидаторов. Хотите вы или нет, в вашем бандле всегда будет присутствовать 2 компонента и директива валидаций, перевод на английский язык и 35 валидаторов.

Вторая проблема — из-за подхода, основанного на подписке на события, могут возникать проблемы при интеграции с другими библиотеками, которые тоже изменяют поведение полей ввода (маскеры и т.п.).

Третья проблема — более субъективная — переводы ошибок общие и некрасивые, не отражают реальной сути.

Возьмем форму из прошлых примеров. Если вы введете неправильный номер и дату паспорта, то получите такие ошибки:

Поле серия и номер паспорта имеет ошибочный формат.
Поле дата выдачи паспорта должно быть в формате dd.MM.yyyy.

Хочется заменить их на что-то более удобочитаемое:

Поле серия и номер паспорта должно быть в формате 1234 567890
Поле дата выдачи паспорта должно быть в формате ДД.ММ.ГГГГ

Vuelidate

Библиотека Vuelidate появилась в ответ на проблемы с подходами, которые содержит в себе библиотека vee-validate. Vuelidate не имеет ни обработчиков событий для полей, ни переводов для ошибок валидации.

Она требует от вас только одного — описать валидации в объекте validations. Затем она сама создаст computed-поле $v с флагами валидации полей и функциями для изменения этих флагов.

Благодаря простому подходу к валидациям, Vuelidate весит всего 3.4 КБайта (minified+GZIP), почти в 10 раз меньше vee-validate.

Устанавливается она так же просто:

npm i vuelidate

/* main.js */

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

/* ... */

Перепишем форму из прошлого примера с использованием Vuelidate:

<template>
  <form @submit.prevent="someAction()">
    <!--
      Ошибка будет отображена пользователю сразу же,
      флаг $v.passportData.$invalid говорит о том, валидное поле или нет
    -->
    <div>
      <input type="text" v-model="passportData">
      <span v-if="$v.passportData.$invalid">
        Серия и номер паспорта должны быть в формате 1234 567890
      </span>
    </div>

    <!--
      Ошибка будет отображена после события blur

      Метод $touch() выставит флагу $v.passportDate.$dirty значение true.
      Флаг $v.passportDate.$error высчитывается как
      $v.passportDate.$invalid && $v.passportDate.$dirty
    -->
    <div>
      <input type="text" v-model="passportDate" @blur="$v.passportDate.$touch()">
      <span v-if="$v.passportDate.$error">
        Дата должна быть в формате ДД.ММ.ГГГГ
      </span>
    </div>


    <!--
      Поле, которое тоже выведет ошибку после события blur, но с другим подходом

      $v.passportDate.$model - объект, при записи данных в который:
      - Vuelidate присвоит переданное значение полю passportDate
      - Vuelidate вызовет метод $touch() у объекта $v.passportDate

      Модификатор lazy необходим, чтобы присваивание произошло только после blur
    -->
    <div>
      <input type="text" v-model.lazy="$v.passportDate.$model">
      <span v-if="$v.passportDate.$error">
        Дата должна быть в формате ДД.ММ.ГГГГ
      </span>
    </div>

    <!-- Поле с несколькими ошибками -->
    <div>
      <input type="text" v-model="name" @blur="$v.name.$touch()">
      <span v-if="$v.name.$error">
        <template v-if="!$v.name.maxLength">
          Длина имени не должна превышать {{ $v.name.$params.maxLength.max }} символов
        </template>
        <template v-else-if="!$v.name.alpha">
          Имя должно содержать только буквы
        </template>
        <template v-else>
          Имя обязательно для заполнения
        </template>
      </span>
    </div>

    <button type="submit" :disabled="$v.$invalid">
      Отправить форму
    </button>
  </form>
</template>

<script>
import { required, maxLength } from 'vuelidate/lib/validators';
import moment from 'moment';

export default {
  data() {
    return {
      passportData: null,
      name: null,
      passportDate: null,
    };
  },

  // Модель для валидации, которую Vuelidate превратит в computed-поле $v
  validations: {
    // Название поля должно совпадать с полем в data
    passportData: {
      required,
      validFormat: val => /^\d{4} \d{6}$/.test(val),
    },
    passportDate: {
      required,
      validDate: val => moment(val, 'DD.MM.YYYY', true).isValid(),
    },
    name: {
      required,
      maxLength: maxLength(10),
      alpha: val => /^[а-яё]*$/i.test(val),
    },
  },
};
</script>

Песочница с примером

Кастомные валидаторы можно быстро и легко описывать с помощью функций. Если вы хотите, чтобы параметры вашего валидатора попали в объект $params, используйте специальный хелпер withParams.

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

Остальные возможности библиотеки

• Поддержка асинхронных валидаций
• Поддержка валидаций коллекций

Проблемы

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

Заключение

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

Если вы делаете админку для внутреннего использования, не хотите тратить ни капли времени на строчки ошибок — выбирайте vee-validate. Она поможет быстро и без проблем написать много валидаций.

Спасибо за внимание!