Опитвали ли сте някога да изпратите формуляр, само за да може уеб страницата да ви даде съобщение за грешка, което ви казва, че едно или повече от полетата са невалидни? Ако е така, тогава сте изпитали валидиране на формуляр.

Валидирането често е от съществено значение за получаване на чисти, използваеми данни. От имейл адреси до дати, ако трябва да е точен, трябва да го проверите внимателно.

Какво е валидиране на формуляр?

Валидирането на формуляра е процесът за гарантиране, че данните, въведени във формуляр от потребителя, са правилни и пълни. Можете да направите това от страна на клиента, като използвате вградени HTML функции като задължителния атрибут. Можете също валидирайте на клиента с помощта на JavaScriptи има външни Next.js библиотеки, които да улеснят процеса.

Има няколко причини, поради които валидирането на формуляра е от съществено значение. Първо, това помага да се гарантира, че данните, въведени във формуляр, са пълни и правилни. Това е важно, защото помага за предотвратяване на грешки, когато приложението ви изпраща данни към сървър или база данни.

instagram viewer

Второ, валидирането на формуляр може да помогне за подобряване на използваемостта на формуляр чрез предоставяне на обратна връзка, когато потребител въведе невалидни данни. Това може да помогне да се избегне разочарованието и объркването от страна на потребителя.

И накрая, валидирането на формуляр може да помогне за подобряване на сигурността на формуляр, като гарантира, че изпраща само валидни данни.

Как да валидирате формуляри в Next.js

Има два начина за валидиране на формуляри в Next.js: използване на вградените методи или използване на външни библиотеки.

Използване на вградените методи

HTML предоставя няколко метода за валидиране на формуляри, най-разпространеният от които е изисква се атрибут. Това гарантира, че полето не може да бъде празно. Можете да използвате този метод от вашето приложение Next.js, просто като включите атрибута във входните тагове, които генерирате. HTML също предоставя a модел атрибут. Можете да използвате това заедно с a регулярен израз за по-сложно валидиране.

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

импортиране Реагирайте от "реагира"
класMyFormсе простираРеагирайте.Компонент{
 рендер() {
връщане (
<форма >
<етикет>
 Име:
<тип вход ="текст" име="име" задължително />
</label>
<етикет>
 Електронна поща:
<тип вход ="електронна поща" име="електронна поща"
 модел="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<тип вход ="Изпращане" стойност="Изпращане" />
</form>
 )
 }
}
износпо подразбиране MyForm

Този код импортира React библиотеката, след което създава клас, наречен MyForm, и изобразява елемент на формуляр. Вътре в елемента на формуляра има два елемента етикет.

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

И накрая, имате бутон за изпращане. Когато потребителят изпрати формуляра, задължителният атрибут гарантира, че е попълнил полето за име. Атрибутът за шаблон на полето за имейл гарантира, че имейлът е в посочения формат. Ако някое от тези условия е неуспешно, формулярът няма да бъде изпратен.

Използването на вградените методи има няколко недостатъка. Първо, може да е трудно да следите всички различни правила за валидиране, които сте задали. Второ, ако имате много полета, може да е досадно да добавите необходимия атрибут към всяко от тях. И накрая, вградените методи осигуряват само основно валидиране. Ако искате да направите по-сложно валидиране, ще трябва да използвате външна библиотека.

Използване на външна библиотека

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

За да използвате външна библиотека, първо трябва да я инсталирате. Например, за да инсталирате Formik, изпълнете следната команда:

npm Инсталирай formik

След като инсталирате библиотеката, можете да я импортирате във вашия компонент и да я използвате за валидиране на вашия формуляр:

импортиране Реагирайте от "реагира"
импортиране { Formik, Form, Field } от "формик"
конст MyForm = () => (
<Formik
 първоначални стойности={{ име: '', електронна поща: '' }}
 validate={values ​​=> {
конст грешки = {}
ако (!стойности.име) {
 errors.name = 'Задължително'
 }
ако (!стойности.електронна поща) {
 грешки.имейл = 'Задължително'
 } другоако (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (стойности.имейл)
 ) {
 грешки.имейл = 'Невалиден имейл адрес'
 }
връщане грешки
 }}
 onSubmit={(стойности, {setSubmitting}) => {
 setTimeout(() => {
 тревога(JSON.stringify (стойности, нула, 2))
 setSubmitting(невярно)
 }, 400)
 }}
>
 {({ isSubmitting }) => (
<форма>
<Тип на полето="текст" име="име" />
<Тип на полето="електронна поща" име="електронна поща" />
<тип бутон="Изпращане" disabled={isSubmitting}>
 Изпращане
</button>
</Form>
 )}
</Formik>
)
износпо подразбиране MyForm

Тук първо импортирате Formik, форма, и Поле компоненти от библиотеката Formik. След това създайте компонент, наречен MyForm. Този компонент изобразява формуляр, който има две полета: име и имейл.

Подтвърждението initialValues ​​задава първоначалните стойности на полетата на формуляра. В този случай полетата за име и имейл са празни низове.

Подтвърждението за валидиране задава правилата за валидиране за полетата на формуляра. В този случай полето за име е задължително, а полето за имейл трябва да съответства на регулярен израз.

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

Пропът isSubmitting определя дали формулярът се изпраща в момента. В този случай го задавате на false.

Накрая изобразете формуляра с помощта на компонента Form от Formik.

Предимства от използването на външни библиотеки в Next.js

Има няколко предимства от използването на външна библиотека като Formik за валидиране на формуляри в Next.js. Едно предимство е, че е много по-лесно да се показват съобщения за грешки на потребителя. Например, ако задължително поле не е попълнено, Formik автоматично ще покаже съобщение за грешка, включително предложена корекция.

Друго предимство е, че Formik може да обработва по-сложни правила за валидиране. Например, можете да използвате Formik, за да потвърдите, че две полета са еднакви (като парола и поле за потвърждение на парола).

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

Увеличете ангажираността на потребителите с помощта на формуляри

Можете да използвате формуляри, за да увеличите ангажираността на потребителите. Чрез предоставяне на обратна връзка, когато потребителят въведе невалидни данни, можете да помогнете да избегнете разочарование и объркване.

С помощта на външни библиотеки можете да добавяте функции като автоматично попълване и условни полета. Те могат да ви помогнат да направите вашите формуляри още по-удобни за потребителя. Когато се използват правилно, формулярите могат да бъдат мощен инструмент, който да ви помогне да увеличите ангажираността на потребителите и да съберете данните, от които се нуждаете.

Освен валидиране, Next.js има много функции, които можете да използвате, за да увеличите ангажираността на потребителите.