Автор оригинала: FreeCodeCamp Community Member.
Остин Малерба
Валидация формы может быть сложной вещью. Существует удивительное количество краевых случаев, когда вы попадаете в кишки реализации формы. К счастью, существует много библиотек валидации формы, которые предоставляют необходимые флаги и обработчики для реализации надежной формы, но я бросил вызов, чтобы построить один в 100 линий кода, используя React Cooks API (в настоящее время в альфа). В качестве реактивных крюков по-прежнему представляют собой экспериментальное предложение, это подтверждение концепции для применения реактивных крюков для реализации проверки формы.
Также справедливое предупреждение, библиотека Я строю 100 строк кода, но в этом руководстве имеет ~ 200 строк кода, потому что мне нужно показать, как используется библиотека.
Многие образующие учебные пособия, которые я видел, не сможет обратиться к трем большим темам: Async Vailation , проверки поля, которые должны быть вызваны, когда Другие Поля меняются и оптимизация Частота валидации . Я беспокоил учебные пособия, которые сосредоточены на одном случае с одним использованием и удерживают все другие переменные, потому что это не так, как работает реальный мир, поэтому я постараюсь поразить различные случаи использования.
Стреммся удовлетворить следующее:
- Синхронно проверяйте поле и любые зависимые поля при изменении значения поля
- Асинхронно проверяйте поля и любые зависимые поля, когда значение поля изменяется
- Синхронно проверяйте все поля перед отправкой
- Асинхронно проверяйте все поля перед отправкой
- Попробуйте представление ASYNC и если форма не выполняется, отображать ошибки от ответа
- Выдержать методы валидации разработчику, чтобы разработчик мог проверить онблур или в другие времена, которые имеют смысл
- Разрешить несколько валейций на поле
- Отключить представление, если форма имеет ошибки
- Не показывайте ошибки поля, пока оно не было изменено или до Представление формы была предпринята попытка
Мы достигнем этих случаев использования, внедряя форму регистрации аккаунта с помощью имени пользователя, пароля и подтверждения пароля. Ниже я изложил тип интерфейса, который мы ищем, мы построим библиотеку, чтобы удовлетворить этот договор.
Это относительно простая API, но должна дать нам большую гибкость. Возможно, вы заметили, что этот интерфейс включает в себя два аналогичных именованных функциях, проверку и проверку. Мы определим проверку в качестве функции, которая принимает данные формы и имени поля и возвращает сообщение об ошибке, если проблема найдена, в противном случае она вернет значение falsey. С другой стороны, функция Validate будет запустить все функции проверки для поля и обновит список ошибок поля.
Во-первых, во-первых, нам нужен скелет для обработки изменений в цене и представлении формы. Наша первая итерация не будет включать в себя какую-либо проверку, она будет просто обрабатывать состояние формы.
В этом коде нет ничего сумасшедшего. Единственное состояние, которое мы отслеживаем, – это значения поля. У нас есть каждая поля зарегистрируйтесь с формой в конце его инициализации. Наши обработчики Onchange просты. Самым запугивающим функциями здесь является GetFormdata, но даже это довольно тривиально за неприглядным снижением синтаксиса. GetFormData Iterate по полям формы и дает нам простое объектное представление значений формы. Последнее, что я чувствую, я должен объяснить, что нам нужно позвонить Previewdefault, чтобы предотвратить перезагрузку страницы.
Это хорошо и денди, но давайте добавим поддержку проверки сейчас. Мы еще не укажем, какие поля должны быть подтверждены при изменении значения поля. Вместо этого мы проверяем все поля всякий раз, когда значение изменяется, и всякий раз, когда форма представлена.
Приведенный выше код – это улучшение и, на первый взгляд, кажется, что это может работать хорошо, но это на самом деле совсем небрежный до конечного пользователя Отказ Не хватает многих необходимых флагов, которые помогают предотвратить ошибки от отображения в неподходящее время. Он немедленно проверяет поля до того, как пользователь имел шанс изменять их и отображать соответствующие ошибки.
По крайней мере, нам нужен нетронутый флаг, чтобы сказать пользовательскому интерфейсу не отображать ошибки, если пользователь не изменил поле. Но пойдем дальше. В дополнение к первозданному флагу, мы хотим еще несколько флагов.
Мы захотим, чтобы флаг указал, что пользователь попытался отправить форму, и мы захотят флаги, чтобы указать, когда форма отправляется, и когда каждое поле проверяется асинхронно. Вы также можете задаться вопросом, почему мы вызываем ValidateFields Insife Exate Effect в отличие от внутренней части Handchange Handler. Нам нужен Use Effect, потому что SetValue происходит асинхронно и не возвращает обещание и не предлагает обратного вызова. Следовательно, единственный способ, которым мы можем быть уверены, что SetValue завершен, является прослушиванием изменения значения через USEFFECT.
Давайте реализуем флаги, которые я упомянул, чтобы помочь убрать пользовательский интерфейс и обрабатывать некоторые краевые случаи.
Наша окончательная итерация много добавляет. Он добавляет четыре флаги: нетронутые, проверяющие, представленные и отправляющие. Он также добавляет параметр FieldStoLiatedonChange, который передается в ValidateFields, чтобы указать, какие поля должны быть подтверждены при изменении значения поля. Мы используем эти флаги в UI для управления, когда отображаются спины и ошибки, а также отключить кнопку отправки.
Одна особая вещь, которую вы, возможно, заметили, является ValidateCounter. Нам нужно отслеживать, сколько раз вызывалось функция Validate, поскольку к тому времени, когда наша функция проверки достигла завершения, это возможно, что Validate будет вызван снова. Если это так, нам нужно игнорировать результаты этого вызова и использовать только результаты последнего вызова для обновления состояния ошибки для поля.
Когда все сказано и сделано, вот функциональный результат.
Реагистрационные крюки обеспечивают аккуратный раствор для формирования валидации. Это мои первые эксперименты с предлагаемым API, и я нашел его мощным, но немного неловко. Интерфейс свойственно, с немного слишком много магии для моего вкуса. Однако, как только я принял свои пятна, это оказалось вполне способным.
Я чувствовал, что им не хватает нескольких функций, а именно механизм обратного вызова, чтобы указать, когда у steState Setter завершил обновление состояния, а также способ проверять PROP DELTAS в крючке использования.
После примечания
Умеренно умышленно оставляли некоторые валидацию аргументов и обработку ошибок, чтобы сохранить этот урок, чтобы следовать и просто следовать. Возьмите, например, то, как я не проверю, проходит ли форма в поле в поле, действительно является формой. Было бы намного приятнее проверить это явно и бросить эсзаходованную ошибку. Однако, как я уже написал, код будет бомбить с чем-то вроде
Cannot read property 'addField' of undefined
Этот код нуждается в правильном проверке аргумента и обработка ошибок, прежде чем он может быть опубликован как библиотека NPM. Что сказал, я реализовал Более надежная версия который включает в себя проверку аргумента через суперструк Если вы хотите, чтобы проверить это.
Оригинал: “https://www.freecodecamp.org/news/how-i-built-an-async-form-validation-library-in-100-lines-of-code-with-react-hooks-81dbff6c4a04/”