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

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

Что такое проверка формы?

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

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

instagram viewer

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

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

Как проверять формы в Next.js

Есть два способа проверки форм в Next.js: с помощью встроенных методов или с помощью внешних библиотек.

Использование встроенных методов

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

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

Импортировать Реагировать от «реагировать»
сортМоя ФормарасширяетРеагировать.Компонент{
 оказывать() {
возвращаться (
<форма >
<этикетка>
 Имя:
<тип ввода="текст" имя="имя" необходимый />
</label>
<этикетка>
 Электронная почта:
<тип ввода="электронная почта" имя="электронная почта"
 шаблон ="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<тип ввода="представлять на рассмотрение" значение ="Представлять на рассмотрение" />
</form>
 )
 }
}
экспортпо умолчанию Моя Форма

Этот код импортирует библиотеку React, затем создает класс MyForm и отображает элемент формы. Внутри элемента формы есть два элемента метки.

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

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

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

Использование внешней библиотеки

В дополнение к встроенным методам существует множество внешних библиотек, которые можно использовать для проверки форм. Некоторые популярные библиотеки включают Formik, react-hook-form и Yup.

Чтобы использовать внешнюю библиотеку, ее сначала необходимо установить. Например, чтобы установить Formik, выполните следующую команду:

нпм установить формик

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

Импортировать Реагировать от «реагировать»
Импортировать {Формик, Форма, Поле} от 'формик'
константа МояФорма = () => (
<Формик
 InitialValues={{ имя: '', электронная почта: '' }}
 подтвердить = {значения => {
константа ошибки = {}
если (!ценности.имя) {
 ошибки.имя = 'Необходимый'
 }
если (!ценности.электронная почта) {
 ошибки.электронная почта = 'Необходимый'
 } ещеесли (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (значения.email)
 ) {
 ошибки.электронная почта = 'Неверный адрес электронной почты'
 }
возвращаться ошибки
 }}
 onSubmit={(значения, {setSubmitting}) => {
 установить время ожидания (() => {
 тревога(JSON.stringify (значения, нулевой, 2))
 установитьОтправка(ЛОЖЬ)
 }, 400)
 }}
>
 {({ isSubmitting }) => (
<Форма>
<Тип поля="текст" имя="имя" />
<Тип поля="электронная почта" имя="электронная почта" />
<тип кнопки="представлять на рассмотрение" disabled={isSubmitting}>
 Представлять на рассмотрение
</button>
</Form>
 )}
</Formik>
)
экспортпо умолчанию Моя Форма

Здесь вы сначала импортируете Формик, Форма, и Поле компоненты из библиотеки Formik. Затем создайте компонент под названием MyForm. Этот компонент отображает форму с двумя полями: имя и адрес электронной почты.

Свойство initialValues ​​устанавливает начальные значения полей формы. В этом случае поля имени и электронной почты являются пустыми строками.

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

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

Свойство isSubmitting определяет, отправляется ли форма в данный момент. В этом случае вы устанавливаете его в false.

Наконец, визуализируйте форму с помощью компонента Form от Formik.

Преимущества использования внешних библиотек в Next.js

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

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

Наконец, Formik упрощает отправку данных формы на сервер. Например, вы можете использовать Formik для отправки данных формы в API.

Повышайте вовлеченность пользователей с помощью форм

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

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

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