Валидация форм в ReactJS
Mar 20, 2017 · 5 min read
Это пошаговое руководство покажет как сделать базовую проверку введенных данных в форму созданной с помощью React.
Мы будем использовать create-react-app для создания и запуска просто приложения с использованием React.
Установим пакеты и создадим новое приложение:
Откроем созданное приложение по ссылке http://localhost:3000/
Подключим Bootstrap для удобной стилизации будущей формы:
В начале файла src/index.js импортируем файл стилей CSS Bootstrap и, опционально, тему Bootstrap:
Хорошо. Теперь построим основу нашего приложения — добавим компонент Form.
В src/App.js заме н яем первоначальную разметку с помощью компонента Form, который вскоре создадим. Также необходимо сделать импорт компонента:
Я копировал пример формы из примера в Bootstrap, так как она смотрится довольно неплохо.
Но я сделал некоторые изменения, чтобы форма работала с JSX. Так слова class и for зарезервированны в JavaScript, поэтому мы должны использовать className и htmlFor вместо них, соответственно.
Добавим начальное значение state в конструктор:
Мы установили значения по умолчанию email и password в виде пустых строк.
Если мы сейчас будем вводить текст в поля, то значение состояния компонента не будет обновляться. Добавим обработчик onChange для полей ввода:
Добавим логику обработчика:
Отлично. Теперь перейдем к самой проверке.
Свойство formError содержит объект, который состоит из названия полей в качестве ключей и информации об ошибке в качестве значения. Первоначальное значение для каждого ключа является пустой строкой.
Добавим новый компонент FormErrors для отображения ошибок валидации над формой:
Сохраним компонент в файле src/FormErrors.js:
Это простой функциональный компонент, который принимает объект formError и возвращает объект содержащий JSX с сообщениями об ошибке, либо пустую строку.
Теперь мы можем запускать проверку как только пользователь начинает заполнять поля.
Метод setState принимает функцию обратного вызова в качестве второго аргумента, в которую можно передать функцию проверки:
Объявим эту функцию:
Здесь мы имеем две проверки. Для поля электронной почты проверка осуществляется при помощи регулярного выражения.
Отмечу: я использую пример регулярного выражения из Devise library. Проверка электронной почты достаточно сложная задача, но для нашего примера этого будет достаточно.
Поле для ввода пароля проверяем на количество введенных символов. Минимальное количество 6 символов. Если менее, то выдаем ошибку.
Теперь наша простая форма будет иметь проверку ввода данных.
Метод errorClass определим как:
Теперь поле не прошедшее проверку получает красное обрамление вокруг.
Это очень просто пример. Мы имеем жесткое название полей при валидации, что вызовет проблемы при масштабировании приложения. Также мы имеет только одну проверку поля, что не совсем удобно.
Но мы можем обобщить это (уйти от жесткой привязки к поляи — прим. переводчика), чтобы обрабатывать любое количество полей с множественными ошибками.
Существует много библиотек для проверки данных формы, но перед тем как начать использовать одну из них, хорошо поразмыслить как бы вы реализовали свой подобный функционал.
Этот урок является отрывком The Complete React on Rails Course, в котором разъясняется валидация форм более подробно.
Валидация форм в React
Если вы когда-нибудь пользовались фреймворком AngularJS, то вы знаете, как легко в нем валидируются формы. Однако в React ситуация несколько хуже. Оно и понятно, ведь это всего лишь библиотека. Но благодаря сообществу из этой библиотеки можно сделать мощное средство для создания полноценных SPA-приложений. На данный момент создано огромное множество компонентов, которые способны удовлетворить большинство нужд разработчиков на React. В данной статье я бы хотел описать подход, который использовал для валидации форм с помощью компонента Formsy-react.
Начну с того, что компонентов для валидации форм существует достаточно много (здесь представлено 32). Я попробовал некоторые из них и решил остановиться именно на Formsy, так как он выглядел не слишком замудреным и при этом достаточно гибким. Принцип работы я покажу на примере формы логина. Чтобы не заморачиваться со стилями, будем использовать react-bootstrap.
В тестовом приложении логин возможен 3 способами: по логину, электронной почте или номеру телефона. Соответственно, для каждого вида логина нужны свои конкретные валидации. Для простоты примера, я покажу лишь компонент с формой логина, ссылку на репозиторий проекта вы сможете найти в конце статьи.
Итак, у нас есть компонент Login, который и отвечает за нашу форму. В нем есть 3 различных способа логина, соответственно, удобно было бы отобразить их с помощью вкладок:
Каждая вкладка представляет из себя форму, внутри которой лежит 2 поля и кнопка для отправки формы.
Начнем по порядку, с компонента Formsy.Form. В нем нас интересует 3 свойства (props): onValidSubmit, onValid, onInvalid.
Свойство onValidSubmit отвечает за отправку формы. Если все данные введены корректно и пользователь нажимает кнопку логин, то происходит вызов функции this.handleLogin, которая отправляет данные на сервер. Эта функция должна иметь один параметр, который будет содержать в себе объект. В этом объекте хранятся названия полей и их значения.
Свойства onValid и onInvalid отвечают за состояние кнопки отправки. В них стоит передать функцию, которая будет включать или выключать кнопку в зависимости от корректности введенных данных.
Далее у нас есть поля, которые необходимо проверять на валидность введенных данных. Для нормального функционирования данного компонента, нам необходимо создать собственный компонент для ввода данных (TextInput). На сайте Formsy можно найти готовый компонент, который включает в себя все что нужно и требует минимум изменений перед использованием. В наш компонент необходимо передать все стандартные свойства для тега input, такие как type и пр, а также несколько специальных свойств, которые помогут с валидацией компонента.
Первым таким свойством является name. Когда пользователь нажмет на кнопку отправки данных, вы сможете легко получить нужный input по имени, а также его значение.
Также необходимо обозначить свойство validations. В данном свойстве ожидается объект. В компоненте Formsy уже заложены некоторые валидации, например, minLength, которую я использовал в поле логин. Не сложно догадаться, что с помощью этой проверки мы можем установить минимальное число введенных символов. Есть и много других встроенных валидаций, например, на проверку корректности адреса электронной почты, телефона и другие. Однако, этот компонент не был бы так хорош, если бы нельзя было создавать собственные функции проверки. И это возможно!
Например, в поле с вводом электронной почты я объявил собственную проверку того, что человек вводит адрес электронной почты, зарегистрированный на gmail.com. Функция проверки выглядит следующим образом:
Функция принимает в себя 2 параметра: все поля формы и текущее поле, которое проходит проверку. Первый параметр содержит массив всех полей и их значений, которые присутствуют в форме. Во втором параметре value содержится содержимое текущего поля. Внутри функции обязательно нужно проверить, существует ли value, а также произвести любые другие проверки. Если функция возвращает false, значит проверка не прошла и пользователь не сможет отправить форму. В обратном случае все ок, данное поле прошло проверку и не содержит ошибок
Таким образом, данный компонент здорово помогает с валидацией форм, которой так не достает в React. Полный код данного примера вы можете посмотреть в этом репозитории, а также не забудьте посмотреть в репозиторий Formsy, там еще очень много всего интересного. Надеюсь, что статья поможет вам при создании вашего приложения.
React за 60 секунд: валидация формы
Доброго времени суток, друзья!
В этом небольшом туториале я хочу продемонстировать вам пример клиент-серверной валидации формы.
Клиент будет реализован на React, сервер на Express.
Мы не будем изобретать велосипеды, а воспользуемся готовыми решениями: для валидации формы на стороне клиента будет использоваться react-hook-form (+: используются хуки, русский язык), а на стороне сервера — express-validator.
Для стилизации будет использоваться styled-components (CSS-in-JS или All-in-JS, учитывая JSX).
Исходный код примера находится здесь.
Поиграть с кодом можно здесь.
Без дальнейших предисловий.
Клиент
Создаем проект с помощью create-react-app:
В дальнейшем для установки зависимостей и выполнения команд я буду использовать yarn.
Структура проекта после удаления лишних файлов:
Поскольку styled-components не умеет импотировать шрифты, нам придется добавить их в public/index.html:
Наша форма будет состоять из трех полей: имя пользователя, его адрес электронной почты и пароль. Условия, которым должны удовлетворять данные:
Импортируем и подключаем глобальные стили в src/index.js:
Переходим к основному файлу клиента (src/App.js):
Метод register() хука useForm() поддерживает все атрибуты тега input. Полный список таких атрибутов. В случае с именем, мы могли бы ограничиться регулярным выражением.
Запускаем сервер для клиента с помощью yarn start и тестируем форму:
Замечательно. Валидация на стороне клиента работает, как ожидается. Но ее всегда можно отключить. Поэтому нужна валидация на сервере.
Сервер
Приступаем к реализации сервера (server.js):
Полный список доступных валидаторов можно посмотреть здесь.
Добавим в package.json парочку скриптов — «server» для запуска сервера и «dev» для одновременного запуска серверов:
Выполняем yarn dev и тестируем отправку формы:
Прекрасно. Кажется, у нас все получилось.
Мы с вами рассмотрели очень простой вариант клиент-серверной валидации формы. Вместе с тем, более сложные варианты предполагают лишь увеличение количества валидаторов, общие принципы остаются такими же. Также стоит отметить, что валидацию формы на стороне клиента вполне можно реализовать средствами HTML (GitHub, CodeSandbox).
Начать
Простая валидация форм с React Hook Form.
Установка
Установка React Hook Form выполняется всего одной командой и можно пользоваться.
npm install react-hook-form Копировать
Пример
Следующий код продемонстрирует основы использования:
Видеоурок
В этом видеоуроке я продемонстрировал концепцию и основы использования React Hook Form.
Регистрация полей
Примечание: Каждое обязательное поле должно иметь уникальное имя name в качестве ключа для процесса регистрации.
Примечание: В React Native нужно будет вручную ввести команду для регистрации: register(‘test’, < required: true >) или использовать Controller для оборачивания и автоматической регистрации вашего компонента. Вы можете узнать больше в разделе React Native.
Применение валидации
React Hook Form делает валидацию проще за счёт использования существующей в HTML стандартной валидации форм.
Список поддерживаемых атрибутов валидации форм:
Вы можете детально ознакомиться с каждым атрибутом в разделе о регистрации.
Адаптация существующей формы
Работа с UI библиотеками
Контролируемый Input
React Hook Form включает в себя неконтролируемые компоненты и нативные HTML input(ы), однако трудно избежать работы с внешним контролируемым компонентом, таким как React-Select, AntD and Material-UI, поэтому мы должны создать компонент-обёртку: Controller для упрощения процесса интеграции, предоставляя при этом свободу использования пользовательского ввода в соответствии с вашими потребностями.
Интеграция глобального состояния
Обработка ошибок
Валидация по схеме
React Hook Form поддерживает валидацию формы по схеме с Yup, где вы можете передать validationSchema в useForm как опциональную настройку. React Hook Form будет валидировать ваши поля ввода по схеме и возвращать либо ошибки, либо валидный результат.
Шаг 1: Установите Yup в проект.
npm install @hookform/resolvers yup Копировать
Шаг 2: Настройте схему данных для валидации и зарегистрируйте поля ввода в React Hook Form.
React Native
Вы получите такое же повышение производительности от неконтролируемого компонента. Тем не менее, существуют определенные API, которые не совместимы с React Native (по причине отличий API для вэба и нативных окружений). Вам нужно будет зарегистрировать компонент вручную, как показано в следующем примере.
TypeScript
Хотите узнать больше?
Ознакомьтесь с документацией React Hook Form и узнайте все об API.
Пожалуйста, поддержите нас поставив ★ @github | Feedback
Валидация сложных форм React. Часть 1
Для начала надо установить компонент react-validation-boo, предполагаю что с react вы знакомы и как настроить знаете.
npm install react-validation-boo
Чтобы много не болтать, сразу приведу небольшой пример кода.
Давайте разберём этот код.
Начнём с функции connect, в него мы передаём наши правила валидации и другие дополнительные параметры. Вызвав этот метод мы получаем новую функцию в которую передаём наш компонент(MyForm), чтобы он получил в props необходимые методы работы с валидацией форм.
Также мы в connect передали middleware: logger, для того чтобы в консоли увидеть как происходит валидация.
В props нашего компонента мы получили набор функций:
В данном примере чекбокс remember на русском язык обязательно должен быть установлен required, а на других он всегда валиден valid.
Также мы передали в connect функцию labels(lang), которая возвращает название полей в читаемом виде.
В props вашего компонента, есть функция getLabel(name), которая возвращает значение переданное функцией labels или если такого значения нет, то возвращает name.
Базовые компоненты vBoo
Form, Input, InputRadio, InputCheckbox, Select, Textarea.
Правила валидации
Давайте рассмотрим как писать свои правила валидации.
Для того чтобы написать правило необходимо создать класс, который будет унаследован от класса validator.
Теперь подключим наш валидатор к форме.
Чтобы каждый раз не прописывать все ваши правила валидации, создаём отдельный файл, где они будут прописаны и подключаем его validators: `import ‘file-validation’`. А если для этой формы есть какие-то особые правила, то validators: Object.assign(<>, `import ‘file-validation’`, <. >)
Сценарии
Рассмотрим случаи когда нам необходимо менять правила валидации в зависимости от действий производимых на форме.
По умолчанию у нас сценарий, который называется default, в правилах мы можем прописать при каком сценарии проводить данную валидацию.
Если сценарий не указан, то валидация будет выполняться для всех сценариев.
Через свойство props нашего компонента передаются функции:
А также функции addScenaries и deleteScenaries, которые будут добавлять и удалять сценарии.
Если у нас «семейное положение» выбрано «сожительство» или «брак», то добавляем поле комментарий и естественно это поле надо валидировать только в этом случае, сценарий ‘scenario-married‘.
Если у нас чекбокс «Дополнительно» выставлен, то добавляем дополнительные поля, которые станут обязательны для заполнения, сценарий ‘scenario-addition‘.
Чтобы не делать статью очень большой, продолжу в следующей, где напишу как создавать свои компоненты(например календарь или inputSearch) и их валидировать, как связать с redux и другое.