Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Иногда создание объекта - это сложный и даже многоэтапный процесс с дополнительными условиями. К таким объектам относятся валидаторы, реализованные в объектном стиле.

2 Валидация - это процесс проверки данных на корректность по заданным условиям. А валидатор - это что-то, выполняющее данную проверку.

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

4 Самый простой способ сделать валидацию, это выполнить ручную проверку:

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

6 <h2>Yup</h2>

7 В JavaScript для выполнения валидации очень популярна библиотека yup. Посмотрите на пример, эквивалентный проверкам выше:

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

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

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

11 Yup поддерживает не только разные тексты, но и<a>разные локали</a>, что актуально для многоязычных сайтов.

12 А что делать в ситуации, когда мы работаем с объектом, у которого каждое свойство имеет свои собственные проверки? Yup решает эту задачу очень элегантно, через рекурсивное определение:

13 Но и это еще не все, yup позволяет добавлять дополнительные проверки, которые изначально в него не включены. Подробнее про эту возможность можно прочитать в документации.