Проверка Формы В React

Если вы когда-либо использовали фреймворк AngularJS, то знаете, насколько легко проверять формы.

Однако в React ситуация несколько хуже.

Это понятно, ведь это всего лишь библиотека.

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

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

Начну с того, что компонентов для проверки формы довольно много ( Здесь представлено 32).

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

Принцип работы покажу на примере формы входа.

Чтобы не заморачиваться со стилями, воспользуемся реакция-бутстрап.

В тестовом приложении вход возможен 3 способами: по логину, электронной почте или номеру телефона.

Соответственно, каждый тип входа требует своих собственных проверок.

Для упрощения примера я покажу только компонент с формой входа; Ссылку на репозиторий проекта вы найдете в конце статьи.

Итак, у нас есть компонент Login, который отвечает за нашу форму.

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

  <Tab.Pane eventKey="login">


<Formsy.Form onValidSubmit={this.handleLogin} onValid={this.enableButton} onInvalid={this.disableButton}>


<FormGroup>


<ControlLabel>Login</ControlLabel>


<TextInput name="login" type="text" validations={{minLength: 5}} validationErrors={{minLength: 'Enter at least 5 sumbols'}} required/>


</FormGroup>


<FormGroup>


<ControlLabel>Password</ControlLabel>


<TextInput name="loginPassword" type="password" validations={{strongPassword: validations.strongPassword}} validationErrors={{strongPassword: "Enter a strong password! At least 6 symbols"}} required/>


</FormGroup>


<FormGroup>


<Button type="submit" bsStyle="primary" disabled={!this.state.isButtonEnabled} block>Login</Button>


</FormGroup>


</Formsy.Form>


</Tab.Pane>


<Tab.Pane eventKey="email">


<Formsy.Form onValidSubmit={this.handleLogin} onValid={this.enableButton} onInvalid={this.disableButton}>


<FormGroup>


<ControlLabel>Email</ControlLabel>


<TextInput name="email" type="text" validations={{isGoogleEmail: validations.isGoogleEmail}} validationErrors={{isGoogleEmail: 'Only Gmail boxes are accepted'}} required/>


</FormGroup>


<FormGroup>


<ControlLabel>Password</ControlLabel>


<TextInput name="loginPassword" type="password" validations={{strongPassword: validations.strongPassword}} validationErrors={{strongPassword: "Enter a strong password! At least 6 symbols"}} required/>


</FormGroup>


<FormGroup>


<Button type="submit" bsStyle="primary" disabled={!this.state.isButtonEnabled} block>Login</Button>


</FormGroup>


</Formsy.Form>


</Tab.Pane>


<Tab.Pane eventKey="phone">


<Formsy.Form onValidSubmit={this.handleLogin} onValid={this.enableButton} onInvalid={this.disableButton}>


<FormGroup>


<ControlLabel>Phone</ControlLabel>


<TextInput name="phone" type="tel" validations={{isPhoneNumber: validations.isPhoneNumber, containsPlusPrefix: validations.containsPlusPrefix}} validationErrors={{isPhoneNumber: 'You should enter a valid phone number', containsPlusPrefix: 'Enter your number without +'}} required/>


</FormGroup>


<FormGroup>


<ControlLabel>Password</ControlLabel>


<TextInput name="phonePassword" type="password" validations={{strongPassword: validations.strongPassword}} validationErrors={{strongPassword: "Your password should contain at least 1 number, 1 lowercase letter, 1 uppercase letter"}} required/>


</FormGroup>


<FormGroup>


<Button type="submit" bsStyle="primary" disabled={!this.state.isButtonEnabled} block>Login</Button>


</FormGroup>


</Formsy.Form>


</Tab.Pane>

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

Начнем по порядку, с компонента Formsy.Form. В нем нас интересуют 3 свойства (props): onValidSubmit, onValid, onInvalid. Свойство onValidSubmit отвечает за отправку формы.

Если все данные введены правильно и пользователь нажимает кнопку входа, то вызывается функция this.handleLogin, которая отправляет данные на сервер.

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

Свойства onValid и onInvalid управляют состоянием кнопки отправки.

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

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

Для нормального функционирования этого компонента нам необходимо создать свой компонент для ввода данных (TextInput).

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

Нам нужно передать нашему компоненту все стандартные свойства входного тега, такие как тип и т. д., а также несколько специальных свойств, которые помогут при проверке компонента.

Первое такое свойство — имя.

Когда пользователь нажимает кнопку отправки, вы можете легко получить желаемый ввод по имени, а также его значению.

Вам также необходимо установить свойство проверки.

В этом свойстве ожидается объект. В компонент Formsy уже встроены некоторые проверки, например minLength, которую я использовал в поле входа.

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

Существует множество других встроенных проверок, например, для проверки правильности адреса электронной почты, номера телефона и других.

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

И это возможно! Например, в поле ввода электронной почты я объявил специальную проверку того, что человек вводит адрес электронной почты, зарегистрированный на gmail.com. Функция проверки выглядит следующим образом: Исходный код функции проверки function isGoogleEmail(values, value) { if (typeof value !== 'undefined' && value.indexOf('gmail.com') === -1) { return false; } return true; } Функция принимает 2 параметра: все поля формы и текущее поле, которое проверяется.

Первый параметр содержит массив всех полей и их значений, присутствующих в форме.

Второе значение параметра содержит содержимое текущего поля.

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

Если функция возвращает false, проверка не удалась и пользователь не сможет отправить форму.

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

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

) и для каждой из этих проверок указать свою ошибку (а не писать в одном сообщении, что поле должно содержать не менее 8 символов, 2 цифр, 3 букв и т. д.).

Этот подход используется в поле ввода телефона, где сначала выполняется «сверхнадежная проверка» того, что введенный текст действительно является номером телефона, а затем проверяется, есть ли «+» в начале.

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

Надеюсь, эта статья поможет вам при создании вашего приложения.

Спасибо за внимание! Теги: #проверка формы #react #react.js

Последнее изменение: 2024-12-19 05:12:58

Вместе с данным постом часто просматривают: