Как да направим проверка на имейли Yup: Всичко, което трябва да знаете

апр. 3, 2024
8

Случвало ли ви се е посетителите на уебсайта да попълват формулярите ви с фалшиви или лошо форматирани имейли?

Проверка на имейла на Yup - снимка на корицата

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

Например можете да използвате Yup - библиотека за валидиране на схеми на JavaScript, създадена за опростяване и рационализиране на процеса на валидиране на формуляри и потребителски данни в проектите за уеб разработка.

Какво точно е Yup и как може да промени работата ви по валидиране? Нека разберем.

Какво е Yup?

Yup е икономичен и мощен конструктор на схеми на JavaScript за анализиране и валидиране на стойности. Той действа като библиотека за валидиране на схеми в Javascript и позволява на разработчиците да дефинират схема за валидиране на потребителски вход, полета с данни, телефонни номера и др.

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

И как работи?

В основата си Yup ви позволява да дефинирате обекти за валидиране (схеми), които определят формата на вашите данни, видовете стойности, които всяко поле може да съдържа, и всички правила, които тези стойности трябва да спазват.

Например, ако обработвате формуляр за регистрация на потребител, схемата ви за Yup може да указва следното:

  • полето за имейл трябва да е валиден имейл адрес.
  • а полето за парола трябва да бъде низ, който отговаря на определени изисквания за сложност.

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

Различни правила за валидиране в Yup

Yup предоставя набор от правила за валидиране, които обхващат широк спектър от типове данни и сценарии. Например:

  • Основно валидиране на имейл - като низ, число и булево число.
  • Усъвършенствани техники за валидиране - като regex шаблони за низове или минимални/максимални стойности за числа.
  • Потребителска функция за валидиране - Разработчиците не се ограничават до вградените валидации, предоставени от библиотеката. Ако приложението ви има уникални нужди от валидиране на данни, Yup ви дава инструменти за писане на потребителски функции за валидиране, които могат да бъдат интегрирани в съществуващите схеми за валидиране.

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

Функции на Yup и случаи на употреба

И така, какво точно може да прави Yup и в какви сценарии ще работи?

  • Помощ при валидиране на имейл

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

  • Поддръжка на различни вградени методи за валидиране

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

  • Изпращане на персонализирани съобщения за грешки

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

  • Намаляване на обема на кода, който трябва да напишете и поддържате

В контекста на разработването на уеб сайтове използването на Yup може значително да намали количеството код, което трябва да се напише и поддържа за валидиране на формуляри. Тя се интегрира безпроблемно с популярни front-end рамки, като React, така че е универсален избор за разработчици, които искат да внедрят надеждни решения за валидиране в своите проекти.

Да, валидирането не е малко. Вярно е, че то изисква много учене и технологични познания, но в крайна сметка може да премахне грешките от невалидни записи на имейли.

Как да извършим валидиране на имейл на Yup?

За да извършвате валидиране на имейли с помощта на Yup, ще използвате гъвкавия му API. 

Този процес включва четири стъпки и предлага два основни метода за валидиране на имейли: методът string.email за основни проверки на формата и методът string.matches за по-персонализирани проверки. 

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

Настройка на Yup

Първо, трябва да добавите Yup към проекта си. Той може да бъде изтеглен с помощта на програма за изтегляне на пакети като npm. Изтеглете го с една проста команда:

npm install yup

След това можете да започнете да създавате схеми за валидиране. Основната настройка на схемата за валидиране може да изглежда по следния начин:

внос на * като yup от 'yup';

const schema = yup.object().shape({

имейл: yup.string().email('Невалиден формат на имейл').required('Имейлът е задължителен'),

});

Създаване на схема за валидиране на имейл

За основно валидиране на формата на имейла се използва методът string.email, тъй като той проверява дали въведените от потребителя данни съответстват на общата структура на имейла:

const emailSchema = yup.object({

имейл: yup.string().email('Невалиден формат на имейл'),

});

За да използвате по-персонализиран подход, можете да използвате метода string.matches заедно с регулярен израз и персонализирана функция за валидиране. Този метод е особено полезен, ако имате специфични критерии за това какво представлява валиден имейл във вашето приложение:

const emailSchema = yup.object({

email: yup.string().matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, 'Invalid email format'),

});

Интегриране с формуляри

Сега интегрирайте валидирането на имейли на Yup във формуляри, например в рамки като React. Тук можете да използвате Formik - пакет, който може да се инсталира в приложение на React и е създаден специално за работа с него. По-долу е представен прост пример, в който се използва състоянието на React за обработка на подаването на формуляра и обратната връзка от валидирането:

Импортиране на React, { useState } от 'react';

Импортиране на { useFormik } от 'formik';

внос на * като yup от 'yup';

const validationSchema = yup.object({

имейл: yup.string().email('Невалиден формат на имейл').required('Имейлът е задължителен'),

});

const EmailForm = () => {

const formik = useFormik({

начални стойности: { имейл: " },

validationSchema,

onSubmit: (values) => alert('Формулярът е подаден'),

});

връщане (

<input

type="email"

name="email"

onChange={formik.handleChange}

value={formik.values.email}

onBlur={formik.handleBlur}

/>

{formik.touched.email &amp;&amp; formik.errors.email ? <div>{formik.errors.email}</div> : null}

);

};

Изброените по-горе кодове са само част от едно по-голямо цяло. Ако искате да навлезете в повече подробности, използвайте съответната документация.

Обработка на обратна връзка за валидиране

Не забравяйте да използвате обратна връзка от валидирането за по-добро потребителско изживяване. Представете си, че попълвате формуляр и допускате грешка; бихте искали да знаете какво точно се е объркало и как да го поправите, нали?

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

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

Защо валидирането на имейли на Yup не е добър избор

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

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

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

Освен това прилагането на разширени функции за валидиране на имейли в Yup изисква персонализирани правила за валидиране, които могат да усложняване и увеличаване на разходите за разработка..

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

Това е причината да използвате Bouncer - инструмент, създаден специално за валидиране на имейли, който превъзхожда възможностите на общите библиотеки за валидиране като Yup.

По-добрата алтернатива на валидирането на имейли на Yup

Bouncer се очертава като по-добра алтернатива на Yup за валидиране на имейли и сега ще обясним защо.
 

Начална страница на Bouncer

 
Bouncer предлага набор от разширени и основни инструменти, специално пригодени за проблеми с имейли. Нашият проверител на имейли не само ще провери синтаксиса на даден имейл, но и:

  • Извършване на проверка на DNS и MX записи
  • установяване на връзка със сървъра на получателя SMTP
  • използвате нашите собствени алгоритми, подкрепени от изкуствен интелект, за да преговаряте със SMTP сървърите и да получите възможно най-точните резултати.
  • тествайте качеството на списъка си
  • маркиране на всички имейли, съдържащи неактивни или невалидни домейни
  • идентифициране на имейл адреси, които приемат цялата входяща поща.
  • проверете дали вашите IP адреси и домейни не са включени в списъци за блокиране
  • и още

Bouncer има впечатляваща проверка точност от 99,5% и може значително да намали вероятността от фалшиви положителни резултати.

➡️ Високото ниво на прецизност е от съществено значение за поддържането на чист списък с имейли и за повишаване на цялостната надеждност на доставките - ключови фактори за успешни стратегии за имейл маркетинг и комуникация.

Bouncer's API за проверка на имейл е проектиран за скорост. Той може да обработва до 500 000 имейла в една партида, като ограниченията на скоростта са зададени така, че да отговарят на процесите на проверка както в партида (200 заявки в минута), така и в реално време (1000 заявки в минута).

➡️ Високата скорост гарантира, че фирми като вашата могат да проверяват големи обеми имейл адреси бързо и ефективно, което е от съществено значение за операции, изискващи бърза обработка на данни.

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

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

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

➡️ Bouncer е достъпен инструмент, който предлага надеждна функционалност и го прави привлекателен избор за фирми, които искат да оптимизират процесите за валидиране на имейли, без да се налага да разоряват банката.

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

Преглед на Bouncer

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

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

Изскачащ CTA

Валидиране на имейли бързо и точно

Yup може да се справи с валидирането на схеми чрез своя ефективен подход. 

Без значение дали валидирате прости полета на формуляра или сложни вложени обекти - Yup може да гарантира, че данните ви са правилни и полезни. Като включите този език в стека си за разработка, можете да оптимизирате процесите на валидиране, да подобрите целостта на данните и да създадете по-добри преживявания.

Но какво да правите, ако нямате технологични умения или екип от разработчици, а просто искате прост, но мощен инструмент, който да се грижи за валидирането на имейл адреси и да подобри кампаниите ви за имейл маркетинг?

Тогава е по-добре да изберете Bouncer.

Запознайте се с Bouncer и ще видите, че тя може да прави много повече от Yup. Регистрирайте се днес и валидирайте първите си 100 имейла за безплатно!

Линии и точки