使用 Javascript 和 CSS 进行简单的电子邮件验证

2025-06-04

使用 Javascript 和 CSS 进行简单的电子邮件验证

在本文中，您将学习如何使用Javascript 进行简单的电子邮件验证。您一定见过很多次，不同网站的登录表单都有一种验证机制。这种验证主要针对电子邮件 ID 和密码。

这里我给出了一个小演示，其中有一个输入框。您可以在该输入框中输入电子邮件 ID。如果输入的电子邮件 ID 格式不正确，系统会进行一些基本更改来提醒用户。

使用 JavaScript 进行简单的电子邮件验证

要创建这个简单的电子邮件验证，你需要了解 HTML、CSS 和 JavaScript。首先，我在网页上创建了一个小框，并在其中添加了一个标题。然后，我使用 HTML 输入法创建了一个输入框。

每当您在该输入框中输入内容时，如果输入内容符合邮箱 ID 格式，则输入框的边框将变为绿色，并显示一个绿色图标。如果邮箱 ID 格式不正确，则输入框的边框颜色将变为红色，并显示一个红色图标。同时，还会显示一条错误文本以警告用户。

步骤 1：验证的基本结构

我使用以下 HTML 和 CSS 创建了这个简单电子邮件验证的基本结构。由于这是一个演示，因此在网页上创建了一个小框。该框包含所有信息和输入空间。

我在这里使用了网页的背景色蓝色，盒子的背景色为白色。盒子的宽度为 400px，高度取决于 padding。盒子必须border-radius将四个元素设计成圆形，box-shadow以增强美观。

<div class="container">

</div>
Enter fullscreen mode Exit fullscreen mode 
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: #0584b7;
}
.container{
    width: 400px;
    background-color: #ffffff;
    padding: 50px 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 25px 25px 30px rgba(0,0,0,0.15);
    color: #111111;
}
Enter fullscreen mode Exit fullscreen mode

验证的基本结构

第 2 步：向框添加标题

现在我在这个框中添加了一个标题。Font-size: 25px已用于增加此标题的文本大小，并text-align: center已用于将其放置在框的中间。

<h1>Email Validation</h1>
Enter fullscreen mode Exit fullscreen mode 
h1{
  font-size: 25px;
  text-align: center;
  margin-top: -25px;
  margin-bottom: 25px;
  font-family: sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

向框中添加标题

步骤 3：创建输入电子邮件的地方

以下 HTML 和 CSS 代码用于创建输入空间。这里我使用了级别，并使用 HTML 的输入功能来创建输入空间。

<label for="email-id">Email Id</label><br>
 <input type="email" placeholder="  Email Id or Phone" id="email-id" oninput="checker()"
Enter fullscreen mode Exit fullscreen mode 
label,
input,
#error-msg{
    font-family: 'Poppins',sans-serif;
}
label{
    display: inline-block;
    font-weight: 500;
    margin-bottom: 10px;
}
input[type="email"]{
    display: inline-block;
    border: 2px solid #d1d3d4;
    width: 88%;
    height: 50px;
    border-radius: 5px;
    outline: none;
    letter-spacing: 0.5px;
    font-weight: 400;
}
Enter fullscreen mode Exit fullscreen mode

创建一个输入电子邮件的地方

步骤 4：创建图标查看区域

现在我在这个项目（Javascript 中的简单电子邮件验证）中添加了一个图标。这个图标在正常情况下基本上是看不到的。只有当你输入某些内容时，才会出现。

如果您输入的电子邮件 ID 格式正确，图标将显示为绿色。如果格式不正确，图标将显示为红色。这里我没有添加图标，添加图标并控制所有内容都是用 JavaScript 实现的。我只是在这里创建了一个区域来查看图标。

<div id="icon"> </div>
Enter fullscreen mode Exit fullscreen mode 
#icon{
    float: right;
    height: 50px;
    position: relative;
    font-size: 25px;
    padding-top: 10px;
}
Enter fullscreen mode Exit fullscreen mode

创建图标查看区域

步骤 5：添加无效电子邮件的错误文本

正如我之前所说，当您输入错误的邮箱 ID 时，您会在这里看到一种显示error text。我使用了 display: none ，这样在正常情况下就不会看到它。

<p id="error-msg">Please Enter A Valid Email Id</p>
Enter fullscreen mode Exit fullscreen mode 
#error-msg{
    display: none;
    color: #ff2851;
    font-size: 14px;
    margin-top: 10px;
}
Enter fullscreen mode Exit fullscreen mode

添加无效电子邮件的错误文本

步骤 6：激活 JavaScript 电子邮件验证

此JavaScript 电子邮件验证的基本设计已创建。现在是时候使用 JavaScript 来实现它了。如果您了解 JavaScript 基础知识，那么您可以轻松理解该设计。

首先我逐一设置了的常量input space、error message和ID函数。icon's

let emailId = document.getElementById("email-id");
let errorMsg = document.getElementById("error-msg");
let icon = document.getElementById("icon");
Enter fullscreen mode Exit fullscreen mode

现在我使用 添加了regular expression字符mailRegex。正则表达式实际上是一种格式。您输入的邮箱地址需要遵循这种格式。如果您的邮箱地址符合这种格式，则会被视为有效的邮箱地址。

let mailRegex = /^[a-zA-Z][a-zA-Z0-9\-\_\.]+@[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}$/;
Enter fullscreen mode Exit fullscreen mode

现在我已经使用 JavaScript 的 if 函数实现了它。下面我尝试以一种非常简单的方式向大家展示。

function checker(){
    icon.style.display="inline-block";
// If your input email ID matches mailRegex then the codes below will be valid. 
// This means that an icon will be found here whose color will be green. 
//The error message cannot be viewed. 
//The border of the input space will be green.
    if(emailId.value.match(mailRegex)){
        icon.innerHTML = '<i class="fas fa-check-circle"></i>';
        icon.style.color = '#2ecc71';
        errorMsg.style.display = 'none';
        emailId.style.border = '2px solid #2ecc71';
    }
// Now I bet what kind of change can happen if you don't input anything instead of input.
// The icon will not be visible if you do not input anything. 
//Error message cannot be seen. 
//The border of the input will remain normal.
    else if(emailId.value == ""){
        icon.style.display = 'none';
        errorMsg.style.display = 'none';
        emailId.style.border = '2px solid #d1d3d4';
    }
//Now I have said what will change if the above two conditions do not work. 
//This means that if you input something and input it incorrectly, the following codes will work. 
//Here I have added the 'exclamation' icon and set the color of the icon to red. 
//The error message can be seen. 
//I have also instructed that the color of the border of the input should be red.
    else{
        icon.innerHTML = '<i class="fas fa-exclamation-circle"></i>';
        icon.style.color = '#ff2851';
        errorMsg.style.display = 'block';
        emailId.style.border = '2px solid #ff2851';
    }

}
Enter fullscreen mode Exit fullscreen mode

激活 JavaScript 电子邮件验证

简单的 JavaScript 电子邮件验证

希望通过以上教程，您能够完全理解我是如何用 JavaScript 实现这个简单的电子邮件验证的。您可以在 Instagram 上关注我（@foolishdeveloper），以获取更多此类新内容的更新。如果您对本教程感到满意，请在评论区告诉我们。

关注Instagram更多教程👇👇
https://www.instagram.com/foolishdeveloper/

文章来源：https://dev.to/codemediaweb/simple-email-validation-in-javascript-css-57i6
Devto 翻译
PREV
使用 uv 管理 Python 环境
NEXT
Next.js 中的动态图像占位符