Як зробити перевірку електронної пошти Yup: Все, що вам потрібно знати

Квітень 3, 2024
8

Чи траплялося вам, що відвідувачі сайту заповнювали ваші форми за допомогою підроблених або погано відформатованих електронних листів?

Підтвердження електронної пошти Yup - фото на обкладинці

Перевірка даних, введених користувачем, є фундаментальним кроком у створенні безпечних, зручних для користувача веб-додатків. Але як вирішити це завдання без написання купи кастомного коду перевірки для кожного поля форми?

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

Що таке Yup і як він може змінити вашу роботу з валідації? Давайте дізнаємось.

Що таке Yup?

Yup - це потужний конструктор схем на JavaScript для синтаксичного аналізу та валідації значень. Він діє як бібліотека валідації схем Javascript і дозволяє розробникам визначати схему для валідації користувацького вводу, полів даних, телефонних номерів тощо.

Коротко кажучи, мова Yup дозволяє створювати складні правила валідації, тому ви можете зробити її універсальним рішенням для забезпечення цілісності даних у ваших додатках. Крім того, ви можете використовувати її для валідації електронних листів.

І як це працює?

По суті, Yup дозволяє вам визначати об'єкти валідації (схеми), які визначають форму ваших даних, типи значень, які може містити кожне поле, і будь-які правила, яким ці значення повинні відповідати.

Наприклад, якщо ви обробляєте форму реєстрації користувача, ваша схема Yup може вказувати на це:

  • у полі email має бути вказана дійсна адреса електронної пошти
  • а поле паролю має бути рядком, який відповідає певним вимогам до складності

Однак це не ідеальне рішення для валідації імейлів. У наступних розділах ми покажемо вам інший, кращий спосіб інструмент для перевірки email-адресале спочатку давайте розглянемо правила валідації Yup.

Різні правила валідації в Yup

Yup надає набір правил валідації, які охоплюють широкий спектр типів даних і сценаріїв. Наприклад:

  • Базова перевірка email-адреси - такі як рядок, число та логічний тип
  • Удосконалені методи валідації - наприклад, шаблони регексу для рядків або мінімальні/максимальні значення для чисел.
  • Користувацька функція валідації - розробники не обмежуються вбудованими валідаціями, що надаються бібліотекою. Якщо ваша програма має унікальні потреби у перевірці даних, Yup надає вам інструменти для написання кастомних функцій перевірки, які можна інтегрувати у ваші існуючі схеми перевірки.

Якщо ви розумієте ці правила та ефективно використовуєте їх, ви зміцните цілісність ваших даних, покращите загальний користувацький досвід і гарантуєте, що зібрані дані є дійснимнадійні та готові до обробки.

Можливості та варіанти використання Yup

Отже, що саме може робити Yup, і в яких сценаріях він буде працювати?

  • Допомога у перевірці електронної пошти

Розробники можуть налаштувати правило для перевірки адрес електронної пошти і перевірити, чи користувачі надають правильний формат електронної пошти перед тим, як надсилати форму. Правила і методи валідації можна застосовувати для покращення якості даних і взаємодії з користувачем у веб-додатках.

  • Підтримка різноманітних вбудованих методів перевірки

Yup дозволяє ідентифікувати не тільки звичайні типи даних і шаблони, такі як рядки і числа, але навіть складні об'єкти і масиви. Його можна розширювати, тому ви можете писати власні функції перевірки, якщо ваша програма потребує перевірок, які виходять за рамки вбудованих можливостей Yup.

  • Надсилати власні повідомлення про помилки

Замість того, щоб заплутувати користувачів загадковими повідомленнями про помилки за замовчуванням, Yup дозволяє визначити чіткі, зрозумілі відгуки, які допоможуть користувачам більш ефективно виправляти введені дані. Ця функція особливо цінна, коли ви хочете допомогти користувачам вводити правильні дані.

  • Зменшити кількість коду, який потрібно писати та підтримувати

У контексті веб-розробки використання Yup може значно зменшити кількість коду, який потрібно писати і підтримувати для валідації форм. Він легко інтегрується з популярними фронтенд-фреймворками, такими як React, тому є універсальним вибором для розробників, які хочуть впровадити надійні рішення для валідації у своїх проектах.

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

Як виконати перевірку email-адреси Yup?

Щоб виконати перевірку імейлів за допомогою Yup, вам знадобиться його гнучкий API. 

Цей процес складається з чотирьох кроків і пропонує два основні методи перевірки імейлів: метод string.email для базової перевірки формату і метод string.matches для більш індивідуальної перевірки. 

Давайте заглибимося в те, як ці методи можна використовувати за допомогою тестової функції.

Налаштувати Так.

По-перше, вам потрібно додати Yup до вашого проекту. Його можна завантажити за допомогою програми для завантаження пакунків, наприклад, npm. Завантажте його за допомогою простої команди:

npm install yup

Після цього ви можете почати створювати схеми валідації. Базове налаштування схеми перевірки може виглядати так:

імпортувати * як yup з 'yup';

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

email: yup.string().email('Неправильний формат електронної пошти').required('Потрібна електронна пошта'),

});

Створіть схему перевірки імейлів

Для базової перевірки формату листа ви використовуєте метод string.email, оскільки він перевіряє, чи відповідає введений користувачем текст загальній структурі листа:

const emailSchema = yup.object({

email: yup.string().email('Неправильний формат електронної пошти'),

});

Щоб дослідити більш індивідуальний підхід, ви можете використовувати метод string.matches разом з регулярним виразом і спеціальною функцією перевірки. Цей метод особливо корисний, якщо у вас є специфічні критерії того, що вважається валідним імейлом у вашому додатку:

const emailSchema = yup.object({

email: yup.string().matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, 'Неправильний формат email'),

});

Інтеграція з формами

Тепер інтегруйте валідацію імейлів Yup у форми, наприклад, у фреймворки на кшталт React. Ви можете використовувати Formik - пакет, який можна встановити в React-додаток і який створений спеціально для роботи з ним. Нижче наведено простий приклад використання стану React для обробки відправлення форми та зворотного зв'язку валідації:

import React, { useState } from 'react';

import { useFormik } from 'formik';

імпортувати * як yup з 'yup';

const validationSchema = yup.object({

email: yup.string().email('Неправильний формат електронної пошти').required('Потрібна електронна пошта'),

});

const EmailForm = () => { {\i1

const formik = useFormik({

initialValues: { email: " },

validationSchema,

onSubmit: (values) => alert('Форма відправлена'),

});

return (

<form onSubmit={formik.handleSubmit}}

<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}

</form

);

};

Наведений вище код є лише частиною більшого цілого. Якщо ви хочете дізнатися більше деталей, скористайтеся відповідною документацією.

Обробляйте відгуки про перевірку

Не забувайте використовувати зворотній зв'язок для кращого користувацького досвіду. Уявіть, що ви заповнили форму і зробили помилку; ви б хотіли точно знати, що пішло не так і як це виправити, чи не так?

Саме тут вступає в дію Yup з його кастомними повідомленнями про помилки. Замість того, щоб залишати користувачів у здогадках, Yup дозволяє вам точно вказати, що їм потрібно зробити, щоб виправити введені дані.

Ви можете показувати ці кастомні повідомлення про помилки безпосередньо біля полів форми, до яких вони відносяться. Таким чином, користувачі отримають негайний зворотній зв'язок, якщо вони ввели щось неправильно, наприклад, адресу електронної пошти в неправильному форматі. Їм не доведеться чекати, поки вони натиснуть кнопку "Відправити", щоб дізнатися, що щось пішло не так, тому весь процес буде більше схожий на розмову, а не на гру в здогадки.

Чому валідація email-адрес за допомогою Yup - не найкращий вибір

Хоча Yup пропонує зручний спосіб реалізації правил валідації в додатках, він не завжди може бути ідеальним вибором для всіх сценаріїв.

Основна функція валідації імейлів у Yup - перевірити, чи відповідає вхідні дані базовому формату електронної пошти. Це означає він може не вловити більш складні проблеми з адресами електронної пошти, наприклад, з коректними форматами, але неактивними або неіснуючими доменами, пастки для спамуелектронні листи, розсилки тощо.

Це також не перевіряє можливість доставки адреси електронної пошти або перевіряти постачальників послуг електронної пошти з високим рівнем ризику чи одноразових поштовиків, що, зрештою, має вирішальне значення для компаній, які покладаються на електронну пошту для залучення клієнтів або маркетингових цілей.

Крім того, реалізація розширених функцій валідації імейлів в Yup вимагає кастомних правил валідації, які можуть бути додають складності та збільшують витрати на розробку.

Для додатків, де перевірка електронної пошти є критично важливою для роботи або взаємодії з користувачем, ці обмеження вказують на те, що може знадобитися більш спеціалізований інструмент.

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

Краща альтернатива валідації email-адрес Yup

Bouncer стає кращою альтернативою Yup для валідації імейлів, і зараз ми пояснимо, чому.
 

Домашня сторінка Bouncer

 
Bouncer пропонує набір просунутих і базових інструментів, розроблених спеціально для вирішення проблем з електронною поштою. Наш перевірка електронної пошти перевірить не лише синтаксис листа, але й його структуру:

  • запустити перевірку записів DNS і MX
  • встановити з'єднання з сервером одержувача SMTP
  • використовувати наші власні алгоритми, що підтримуються штучним інтелектом, для переговорів із SMTP-серверами, щоб отримати максимально точні результати
  • перевірте якість вашого списку
  • позначити всі листи, що містять неактивні або недійсні домени
  • визначити адреси електронної пошти, які приймають всю вхідну пошту
  • перевірте, щоб ваші IP-адреси та домени не були внесені до жодного блокувального списку
  • і не тільки

Bouncer має вражаючу верифікацію точність 99.5% і може значно зменшити ймовірність помилкових спрацьовувань.

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

У вишибали. API для перевірки електронної пошти створений для швидкості. Він може обробляти до 500 000 імейлів за одну партію, причому ліміти швидкості встановлюються як для пакетної (200 запитів на хвилину), так і для перевірки в режимі реального часу (1 000 запитів на хвилину).

➡️ Висока швидкість гарантує, що такі компанії, як ваша, можуть швидко та ефективно перевіряти великі обсяги адрес електронної пошти, що дуже важливо для операцій, які вимагають швидкої обробки даних.

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

➡️ Такий рівень підтримки сприяє безперебійній та ефективній роботі користувачів, незалежно від складності завдань валідації, що стоять перед ними.

Крім того, Bouncer пропонує конкурентні цінові пропозиції які задовольняють потреби бізнесу будь-якого розміру. Його модель оплати за фактом і щомісячні плани, а також знижки за обсяги дозволяють гнучко масштабувати зусилля з перевірки відповідно до конкретних потреб.

➡️ Bouncer - це доступний інструмент, який пропонує потужну функціональність, що робить його привабливим вибором для компаній, які прагнуть оптимізувати свої процеси перевірки електронної пошти без зайвих витрат.

Високі показники задоволеності користувачів ще раз підтверджують ефективність Bouncer як сервісу перевірки електронної пошти.
 

Відгук вишибали

 
Вибір Bouncer означає, що замість написання рядків коду ви отримуєте інструмент, який подбає про вашу email-маркетингову кампанію та оцінить коректність даних, введених користувачами, з високою ефективністю.

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

CTA для вишибали

Швидко та точно перевіряйте імейли

Yup може впоратися з валідацією схем завдяки своєму ефективному підходу. 

Незалежно від того, чи ви перевіряєте прості поля форми, чи складні вкладені об'єкти - Yup забезпечить правильність та корисність ваших даних. Включивши цю мову у свій стек розробки, ви зможете оптимізувати процеси валідації, підвищити цілісність даних і створити кращий досвід для користувачів.

Але що робити, якщо у вас немає технологічних навичок або команди розробників, а вам потрібен простий, але потужний інструмент, який подбає про валідацію email-адрес і покращить ваші email-маркетингові кампанії?

Тоді краще вибрати Bouncer.

Познайомтеся з Bouncer ближче і побачите, що він може набагато більше, ніж Yup. Зареєструйтеся вже сьогодні та підтвердіть перші 100 імейлів для вільний!

Лінії та крапки