迹忆客 专注技术分享

在今天的文章中，我们将学习如何在 HTML 中进行电子邮件验证。

HTML中的电子邮件验证

检查电子邮件地址以查看其是否可达和有效的过程称为电子邮件验证。它运行一个简短的过程，快速找到打字错误，无论是无心的错误还是有意的欺骗。

确保获取高质量数据的最有效方法仍然是电子邮件验证。硬退信通常是由于用户关闭了电子邮件地址，是虚假的电子邮件地址，或两者兼而有之。

根据最佳实践，每发送5,000封电子邮件，您应该收到不超过五个垃圾邮件投诉。

用户可以使用 type email 的 <input> 元素输入和修改电子邮件地址。在表单可以提交之前，输入值会自动验证，以确保它要么为空，要么是格式正确的电子邮件地址。

<input> 元素的 value 属性包括一个字符串，该字符串自动验证为符合电子邮件语法。

为了使输入值通过约束验证，pattern 属性是输入的值必须匹配的正则表达式。

电子邮件验证的模式如下：

^[a-z0-9!#$%&‘+/=?^_{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_{|}~-]+)@(?:a-z0-9?.)+a-z0-9?

为了进一步理解前面的概念，请考虑以下示例。

<form id="emailForm">
<input
    type="email"
    required
    placeholder="email1"
>
<input type="text" required name="email1"
    pattern="^[a-z0-9!#$%&‘*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?">
<button type="submit">save</button>

</form>

const form = document.getElementById("emailForm");
function handleForm(event) {
    event.preventDefault();
  console.log("Form submitted")
}
form.addEventListener('submit', handleForm);

在上面的示例中，我们定义了两个输入元素，第一个是电子邮件类型，可独立执行电子邮件验证。

在文本数据类型的第二个输入元素中提供了一个有效的电子邮件 ID 模式。不正确的电子邮件地址将阻止表单被提交，并显示错误通知。

在任何与 HTML 兼容的浏览器中运行上面的代码行。它将显示以下结果。