HTML 中的电子邮件验证

2024 年 8 月 28 日 | 阅读 6 分钟

Web 开发涉及电子邮件验证，这是验证 Web 表单上的数据准确性、安全性和可访问性的重要步骤。在 Web 应用程序的使用过程中，人们通常会出于多种原因提供电子邮件地址，例如在平台创建账户、订阅新闻通讯以及填写联系表单。验证电子邮件地址很重要，可以避免错误、提高用户体验并保持数据纯净。

本完整指南将详细介绍如何在 HTML 模板中实现电子邮件验证。我们将讨论从电子邮件地址的构造到使用 HTML5 输入类型以及 JavaScript 进行客户端验证，再到针对几乎所有类型程序的服务器端验证。电子邮件验证过程将涵盖实时建议、集成其他库以及电子邮件验证设计指南等高级工具。

电子邮件验证的重要性

Web 开发和设计都离不开电子邮件验证。用户在网站表单中填写电子邮件地址以获取通知、更新或特定功能是很常见的。验证电子邮件地址有助于：

用户体验：经过验证的电子邮件地址可确保用户能够正确输入，否则就会出错。结果是网站更好的客户体验。
数据准确性：验证电子邮件地址的真实性将提高数据的可靠性和准确性。因此，进行沟通并拥有干净的数据库非常重要。将上述句子从 AI 编写转换为人工编写。
安全性：电子邮件验证降低了 SQL 注入和跨站点脚本等恶意活动成功的可能性。这是通过仅接受格式正确且真实的电子邮件地址来提供额外安全性的方法之一。
减少弹回：验证可以帮助消除电子邮件弹回（电子邮件无法送达收件人的情况）。这对于电子邮件营销活动以及其他通信工作很重要。

现在让我们了解电子邮件格式的含义以及如何使用 HTML 开发电子邮件验证器。

基本电子邮件格式

标准的电子邮件地址遵循特定格式：用户名@域名。用户名可以包含字母、数字、句点或下划线。它通常由主机名和顶级域 (TLD) 组成，例如 .com 或 .org。电子邮件地址中不应有空格，并且该地址的域名最多只能有一个句点。

以下是基本电子邮件格式的示例

HTML5 输入类型用于电子邮件验证

较新的 HTML5 输入类型旨在简化表单验证。电子邮件输入类型专门用于收集电子邮件地址。内置格式和必填字段验证。以下是带有电子邮件输入的 HTML 表单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Validation</title>
</head>
<body>
<form action="submit_form.php" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <input type="submit" value="Submit">
</form>
</body>
</html>

例如，在本例中，type="email" 属性意味着输入可以接受电子邮件地址。提交记录时，必须使用此属性来确保用户不会将其留空。

基于 HTML5 的电子邮件输入类型的客户端验证不应被视为可靠的安全方法。+ 恶意用户有办法规避这种安全措施。因此，同样重要的是实现服务器端验证。

HTML 中的客户端验证

客户端验证在用户的 Web 浏览器中进行，并立即向用户提供反馈。它有助于捕获常见错误，从而在将表单提交到服务器之前阻止它。浏览器会验证电子邮件是否遵循简单的电子邮件格式。

以下是使用 JavaScript 进行客户端验证的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Validation</title>
    <script>
        function validate email() {
            var emailInput = document.getElementById('email');
            var email = emailInput.value;
            // Regular expression for basic email format validation
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                alert('Please enter a valid email address');
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<form action="submit_form.php" method="post" onsubmit="return validateEmail();">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <input type="submit" value="Submit">
</form>

</body>
</html>

举例来说，validateEmail 函数使用正则表达式来确定给定的电子邮件是否符合基本结构。如果不符合，将出现一个弹出消息，警告用户他们即将提交不完整表单。

客户端验证在很大程度上改善了用户体验。然而，为了保障数据安全和完整性，它必须始终与服务器端验证一起使用。

服务器端验证

通俗地说，这个过程被称为“服务器端验证”，即在所有表单数据提交后，在服务器端进行处理。这是另一个安全步骤，确保只有真实信息才能被处理，而可疑条目则被过滤。因此，需要进行服务器端验证，因为用户可能会禁用 JavaScript 并操纵 HTML 表单。

以下是使用简单的 PHP 脚本进行服务器端验证的示例

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $email = $_POST["email"];
    // Server-side validation for email format
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "Invalid email address";
    } else {
        //process the valid email address
        echo "Email address is valid: " . $email;
    }
}
?>

此 PHP 脚本使用 FILTER_VALIDATE_EMAIL 过滤器调用 filter_var 函数来验证提交的电子邮件地址是否合法。如果有效，则执行其他处理步骤；如果无效，则显示错误消息。

在您的 Web 应用程序上，您需要使用 PHP、Python 或 Node.js 等服务器端脚本语言添加服务器端验证。但是，值得注意的是，实际实现可能会因您的语言或选择的框架而异。

增强电子邮件验证

要增强 HTML 表单中的电子邮件验证，请考虑以下附加功能：

Pattern 属性：在 HTML 中，您可以使用 pattern 属性，使输入的值受特定正则表达式的约束。系统可以进行检查以强制执行自定义的电子邮件验证规则。

<input type="email" id="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" required>

自定义错误消息：为用户指定自定义错误消息，当特定验证规则不满足时。它增强了用户理解，从而改进了错误纠正过程。

<input type="email" id="email" name="email" required oninvalid="this.setCustomValidity('Please enter a valid email address')">

AJAX 验证：采用 AJAX 异步验证，确保输入的电子邮件不存在于系统中。这在需要唯一电子邮件地址的情况下可能很有用。

<script>
    function checkEmailAvailability() {
        var emailInput = document.getElementById('email');
        var email = emailInput.value;
        // Perform AJAX request to check email availability
        // Update error message or provide feedback to the user
    }
</script>
<input type="email" id="email" name="email" required onblur="checkEmailAvailability()">

密码确认：如果您的表单包含密码字段，请考虑包含一个密码确认字段。这可以防止输入错误，并允许用户输入正确的电子邮件地址。

<label for="confirm email">Confirm Email:</label>
<input type="email" id="confirmEmail" name="confirmEmail" required oninput="checkEmailMatch()">

<script>
    function checkEmailMatch() {
        var emailInput = document.getElementById('email');
        var confirmEmailInput = document.getElementById('confirmEmail');

        if (emailInput.value !== confirmEmailInput.value) {
            confirmEmailInput.setCustomValidity('Email addresses do not match');
        } else {
            confirmEmailInput.setCustomValidity('');
        }
    }
</script>

将这些元素集成到您的验证电子邮件系统中将有助于使其在 HTML 表单中更强大，对用户更方便。

在 HTML 表单中实现电子邮件验证

在前面的部分，我们考虑了为什么电子邮件验证、电子邮件地址模式以及 HTML5 中的电子邮件输入类型是重要的客户端验证方法。此外，我们还探讨了如何使用 Java 进行客户端验证以及通过 PHP 进行服务器端验证。对于电子邮件验证的实现，我们将更深入地探讨这些问题，并简要介绍一些替代策略。

1. 自定义客户端验证

通过使用 JavaScript，可以使错误更加自定义，因为它允许更复杂的测试，从而增加了灵活性。因此，我们将使用 Js 添加更多交叉验证脚本插图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Validation</title>
    <script>
        function validate email() {
            var emailInput = document.getElementById('email');
            var email = emailInput.value.trim(); // Trim whitespaces
            // Regular expression for basic email format validation
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                // Check if the email is empty
                if (email === "") {
                    alert('Email address cannot be empty');
                } else {
                    alert('Please enter a valid email address');
                }
                return false;
            }
            // Additional checks (e.g., domain-specific checks)
            return true;
        }
    </script>
</head>
<body>
<form action="submit_form.php" method="post" onsubmit="return validateEmail();">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <input type="submit" value="Submit">
</form>
</body>
</html>

但是，在这个修订的实例中，我们集成了 trim() 函数，该函数可在输入电子邮件地址的前后删除空格。最后，我们还添加了一个检查以确保电子邮件不为空，然后进行规范化处理，以便应用正则表达式验证。用户特定的警报消息比一般性回复提供了更多用户反馈。

下一个主题HTML 中的结束标记

HTML 中的电子邮件验证

电子邮件验证的重要性

基本电子邮件格式

HTML5 输入类型用于电子邮件验证

HTML 中的客户端验证

服务器端验证

增强电子邮件验证

在 HTML 表单中实现电子邮件验证

1. 自定义客户端验证

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 中的电子邮件验证

电子邮件验证的重要性

基本电子邮件格式

HTML5 输入类型用于电子邮件验证

HTML 中的客户端验证

服务器端验证

增强电子邮件验证

在 HTML 表单中实现电子邮件验证

1. 自定义客户端验证

相关帖子

HTML Col Width

HTML 历史

使用 display 属性隐藏或显示 HTML 中的元素

如何为所有设备创建响应式网站

HTML Select Default

HTML 按钮类型

HTML 问卷模板

HTML 按钮 onClick

如何在 HTML 中更改字体

如何制作 HTML 列表

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器