操作前后效果：（知识点和完整代码在最后面）
bilibili在线视频演示链接：
https://www.bilibili.com/video/BV1yd4y1T7eX/?vd_source=5cc677504c9c936e5a0ea2042eb76a56完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【前端实例代码】如何在HTML CSS和JavaScript|中验证电子邮件电子邮件验证</title>
<meta name="viewport" content="width=device-width,initial-sca1e=1.0">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
<style>
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #e3f2fd;
}
.input-field {
position: relative;
height: 50px;
width: 280px;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-field input {
height: 100%;
/* width:100%; */
border: none;
outline: none;
border-radius: 6px;
padding: 0 15px;
font-size: 15px;
font-weight: 400;
}
input::placeholder {
co1or: #b4b4b4;
}
input-field .email-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
co1or: #b4b4b4;
}
</style>
</head>
<body>
<div class="input-field">
<input type="email" placeholder="Enter your email" />
<i class=" uil uil-envelope email-icon"></i>
</div>
<script>
const input = document.querySelector("input");
const emailIcon = document.querySelector(".email-icon");
input.addEventListener("keyup", () => {
console.log("input……")
let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (input.value === "") {
console.log("input is empty")
emailIcon.classList.replace("uil-check-circle", "uil-envelope");
return emailIcon.style.color = "#b4b4b4"
}
if (input.value.match(pattern)) {
emailIcon.classList.replace("uil-envelope", "uil-check-circle");
return emailIcon.style.color = "#4bb543"
}
emailIcon.classList.replace("uil-check-circle", "uil-envelope");
emailIcon.style.color = "#de0611"
})
</script>
</body>
</html>
涉及到的知识点：
1、HTML DOM querySelector() 方法
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
语法
document.querySelector(CSS selectors)
参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| CSS 选择器 | String | 必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。 对于多个选择器，使用逗号隔开，返回一个匹配的元素。 提示： 更多 CSS 选择器，请参阅我们的 CSS 选择器参考手册。 |
技术细节
| DOM 版本: | Selectors Level 1 Document Object |
|---|---|
| 返回值: | 匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。 |
推荐阅读：
https://www.runoob.com/jsref/met-document-queryselector.html2、HTML DOM addEventListener() 方法
定义和用法
addEventListener() 方法用于向指定元素添加事件句柄。
提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
语法
element.addEventListener(event, function, useCapture)
参数值
| 参数 | 描述 |
|---|---|
| event | 必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。 |
| function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture | 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值:
|
推荐阅读：
3、正则表达式校验方法：JavaScript match() 方法
定义和用法
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
如果想了解更多正则表达式教程请查看本站的： RegExp 教程 和我们的 RegExp 对象参考手册。
注意： match() 方法将检索字符串 String Object，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。
语法
string.match(regexp)
参数值
| 参数 | 描述 |
|---|---|
| regexp | 必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。 |
推荐阅读：