如何进行 Yup 电子邮件验证:您需要知道的一切

4 月 3, 2024
8

您是否遇到过网站访客用虚假或格式不正确的电子邮件填写表格的情况?

验证电子邮件 - 封面照片

验证用户输入是创建安全、用户友好的网络应用程序的基本步骤。但如何在不为每个表单字段编写大量自定义验证代码的情况下完成这项任务呢?

例如,您可以使用 JavaScript 模式验证库 Yup,该库旨在简化和精简网络开发项目中验证表单和用户数据的过程。

Yup 究竟是什么,它如何改变你的验证工作?让我们一探究竟。

什么是邑?

Yup 是一款简洁、强大的 JavaScript 模式生成器,用于值解析和验证。它是一个 Javascript 模式验证库,能让开发人员定义一个模式来验证用户输入、数据字段、电话号码等。

简而言之,Yup 语言可以创建复杂的验证规则,因此您可以将其作为确保应用程序内数据完整性的首选解决方案。此外,您还可以用它来验证电子邮件。

它是如何工作的?

Yup 的核心功能是定义验证对象(模式),指定数据的形状、每个字段可包含的值类型以及这些值需要遵循的任何规则。

例如,如果您要处理用户注册表单,您的 Yup 模式可能会指定这样的表单:

  • 电子邮件字段必须是有效的电子邮件地址
  • 密码字段必须是符合一定复杂度要求的字符串

不过,这并不是电子邮件验证的完美解决方案。在后面的章节中,我们将向您展示另一种更好的 电子邮件验证工具但首先,让我们来探讨一下 Yup 验证规则。

不同的验证规则

Yup 提供了一套验证规则,涵盖各种数据类型和情况。例如

  • 基本电子邮件验证 - 如字符串、数字和布尔值
  • 高级验证技术 - 比如字符串的 regex 模式,或者数字的最小/最大值
  • 自定义验证功能 - 开发人员并不局限于库提供的内置验证。如果您的应用程序有独特的数据验证需求,Yup 可为您提供编写自定义验证函数的工具,这些函数可集成到您现有的验证模式中。

如果您了解这些规则并有效利用它们,您就能加强数据的完整性,提升整体用户体验,并保证所收集的数据 是有效的可靠,可随时处理。

功能和使用案例

那么,邑到底能做什么,又能在哪些场景中发挥作用呢?

  • 帮助验证电子邮件

开发人员可以设置规则来验证电子邮件地址,并在提交表单前查看用户是否提供了有效的电子邮件格式。其验证规则和方法可用于改善网络应用程序中的数据质量和用户体验。

  • 支持多种内置验证方法

Yup 不仅能识别字符串和数字等常见数据类型和模式,甚至还能识别复杂对象和数组。它具有可扩展性,因此如果您的应用程序需要超出 Yup 内置功能的检查,您可以编写自定义验证函数。

  • 发送自定义错误信息

Yup 可以让你定义清晰易懂的反馈信息,帮助用户更有效地纠正输入,而不是用隐晦的默认错误信息来迷惑用户。这项功能在帮助用户输入正确数据时尤为重要。

  • 减少需要编写和维护的代码量

在网页开发中,使用 Yup 可以大大减少表单验证所需的代码编写和维护量。它能与 React 等流行的前端框架无缝集成,因此对于希望在项目中实施强大验证解决方案的开发人员来说,它是一个多功能的选择。

邮件验证不是一件小事。诚然,这需要大量的学习和技术知识,但最终可以消除无效电子邮件条目的错误。

如何进行 Yup 电子邮件验证?

要使用 Yup 执行电子邮件验证,您需要利用其灵活的 API。 

该过程包括四个步骤,并提供两种主要的电子邮件验证方法:string.email 方法用于基本格式检查,string.match 方法用于更个性化的检查。 

让我们通过测试功能深入了解如何利用这些方法。

设置 Yup

首先,你需要将 Yup 添加到你的项目中。可以使用软件包下载器(如 npm)下载它。只需一个简单的命令即可下载:

npm install yup

完成后,就可以开始创建验证模式了。基本的验证模式设置可能如下所示:

import * as yup from 'yup';

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

email: yup.string().email('Invalid email format').required('Email is required')、

});

创建电子邮件验证模式

对于基本的电子邮件格式验证,可以使用 string.email 方法,因为它会检查用户输入是否符合一般的电子邮件结构:

const emailSchema = yup.object({

email: yup.string().email('Invalid email format')、

});

要探索更个性化的方法,可以使用 string.matches 方法以及正则表达式和自定义验证函数。如果你对应用程序中的有效电子邮件有特定的标准,这种方法尤其有用:

const emailSchema = yup.object({

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

});

与表单集成

现在,在 React 等框架中将 Yup 电子邮件验证集成到表单中。您可以在这里使用 Formik,它是一个可以安装到 React 应用程序中的软件包,专为与 React 配合使用而构建。下面是一个使用 React 状态来处理表单提交和验证反馈的简单示例:

import React, { useState } from 'react';

import { useFormik } from 'formik';

import * as yup from 'yup';

const validationSchema = yup.object({

email: yup.string().email('Invalid email format').required('Email is required')、

});

const EmailForm = () => {

const formik = useFormik({

initialValues:{ email:" },

validationSchema、

onSubmit:(values) => alert('表单已提交')、

});

返回 (

<输入

type="email"

name="电子邮件"

onChange={formik.handleChange}

value={formik.values.email}

onBlur={formik.handleBlur}

/>

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

);

};

上面列出的代码只是更大整体的一部分。如果您想了解更多细节,请使用相应的文档。

处理验证反馈

记住使用验证反馈,以获得更好的用户体验。试想一下,在填写表格时出错了,你一定想知道到底哪里出错了,该如何补救,对吗?

这时,Yup 的自定义错误信息就能派上用场。Yup 不会让用户猜测,而是让你准确地告诉他们需要做什么来纠正他们的输入。

您可以在相关表单字段旁边显示这些自定义错误信息。这样,如果用户输入了错误信息,比如电子邮件格式错误,他们就能立即得到反馈。他们不必等到点击 "提交 "时才发现有问题,因此整个过程更像是一次对话,而不是猜谜游戏。

为什么说 Yup 电子邮件验证不是一个好选择?

虽然 Yup 为在应用程序中实施验证规则提供了一种便捷的方法,但它并不总是所有情况下的理想选择。

Yup 电子邮件验证的主要功能是检查输入内容是否符合基本的电子邮件格式。这意味着 可能无法发现更复杂的问题 电子邮件地址,如格式有效但域名不活动或不存在的电子邮件地址、 垃圾邮件陷阱、包罗万象的电子邮件等。

它还 不验证电子邮件地址的可送达性 或对高风险或一次性电子邮件提供商进行检查,毕竟,这对于依赖电子邮件通信来吸引客户或进行营销的企业来说至关重要。

此外,在 Yup 中实施高级电子邮件验证功能需要自定义验证规则,这些规则可以 增加复杂性和开发开销.

对于电子邮件验证对操作或用户体验至关重要的应用,这些局限性表明可能需要一种更专业的工具。

这就是使用 保镖 - 是一款专为电子邮件验证而设计的工具,其功能超越了 Yup 等通用验证库。

替代 Yup 电子邮件验证的更好选择

Bouncer 正在成为比 Yup 更优越的电子邮件验证替代方案,现在我们就来解释一下原因。
 

保镖主页

 
Bouncer 提供一系列专门针对电子邮件问题的高级和基本工具。我们的 邮件检查器 不仅可以验证电子邮件的语法,还可以

  • 运行 DNS 和 MX 记录检查
  • 与收件人服务器 SMTP 建立连接
  • 利用人工智能支持的专有算法与 SMTP 服务器进行协商,为您提供最准确的结果
  • 测试名单质量
  • 标记所有包含非活动或无效域名的电子邮件
  • 确定接受所有来信的电子邮件地址
  • 检查您的 IP 和域名是否被列入任何阻止列表
  • 及更多

保镖的核查结果令人印象深刻 精度为 99.5% 并能大大降低误报的几率。

➡️ 高精确度有助于保持电子邮件列表的整洁并提高整体送达率--这是电子邮件营销和通信战略取得成功的关键因素。

保镖的 电子邮件验证API 是专为提高速度而设计的。它可以在单个批次中处理多达 500,000 封电子邮件,并设置了速率限制,以适应批次(每分钟 200 个请求)和实时(每分钟 1,000 个请求)验证流程。

➡️ 高速度可确保像贵公司这样的企业快速、高效地验证大量电子邮件地址,这对于需要快速处理数据的业务至关重要。

Bouncer 的与众不同之处不仅在于其技术能力,还在于其 对用户支持的承诺.用户可通过电子邮件、联系表单和视频通话等各种渠道获得高级客户支持,从而获得所需的帮助,解决任何难题或集成问题。

➡️ 无论手头的验证任务多么复杂,这样的支持水平都有助于提供流畅高效的用户体验。

此外,Bouncer 还提供 有竞争力的定价方案 可满足各种规模的企业需求。其 "即用即付 "模式和月度计划以及批量折扣,可根据具体需求灵活扩展验证工作。

➡️ Bouncer 是一款经济实惠的工具,具有强大的功能,对于希望优化电子邮件验证流程的企业来说,它是一个极具吸引力的选择,而且不会让企业破费。

高用户满意度进一步验证了 Bouncer 作为电子邮件验证服务的有效性。
 

保镖的评论

 
选择 Bouncer 意味着您无需编写代码,只需使用一款工具,它就能高效地管理您的电子邮件营销活动并评估用户输入数据的正确性。

从现在起,您无需将工作外包给他人,也无需考虑聘请开发人员,因为您的指尖上就有专门设计的软件。
 

保镖 CTA

快速准确地验证电子邮件

Yup 可以通过其高效的方法处理模式验证。 

无论是验证简单的表单字段还是复杂的嵌套对象,Yup 都能确保数据的正确性和实用性。通过将这种语言纳入您的开发堆栈,您可以简化验证流程、增强数据完整性并创造更好的体验。

但是,如果您没有技术技能,也没有开发团队,只是想要一个简单但功能强大的工具来验证电子邮件地址并改进您的电子邮件营销活动,那该怎么办呢?

那么最好选择 Bouncer。

了解 Bouncer 看看它能做的远不止这些。立即注册并验证您的前 100 封电子邮件,即可获得 自由的!

线和点