如何在 JavaScript 中进行电子邮件验证？ [举例]
已发表: 2021-02-23JavaScript 是一种旨在创建应用程序的编程语言。 它比其他语言快得多，因为它非常轻巧且易于使用。 它用于创建设计良好的应用程序。
JavaScript 中的电子邮件验证对于创建 Web 应用程序的用户体验很重要。 验证有助于将有效信息从 Web 应用程序的客户端传递到服务器。
目录
什么是验证？
验证是指检查用户输入的值的过程。 它在创建应用程序和增强用户体验方面起着至关重要的作用。 许多字段，例如手机号码、电子邮件、日期和密码，都通过此过程进行验证。
JavaScript 使验证过程更快，因为它比其他服务器端验证更快地处理数据。 现在让我们看一下JavaScript 中电子邮件验证的实现。
JavaScript 中的电子邮件验证
电子邮件验证是验证 HTML 表单的重要部分之一。 电子邮件是 ASCII 字符的子集或字符串，使用 @ 符号分为两部分。 它的第一部分包含私人信息，第二部分包含注册电子邮件的域名。
以下是第一部分的 ASCII 字符：
- # * + & ' 等特殊字符！ %@？ {^}”
- 数字字符（0 到 9）
- 句号、点等，条件是它不能是电子邮件的最后一个字母或第一个字母，并且不能一个接一个地重复。
- 大写字母（A 到 Z）和小写字母（a 到 z）
第二部分包括以下内容：
- 点
- 数字
- 连字符
- 信件
使用正则表达式是JavaScript 中电子邮件验证的最佳方式之一。 它利用正则表达式来定义字符的模式。
一些有效电子邮件 ID 的示例：
- 自己的[email protected]
- 网站所有者@up.down.net
- [email protected]
无效电子邮件 ID 的其他一些示例
- [email protected]（不允许一个接一个的点）
- Inownzsite()&@abcd.com（正则表达式中只允许使用字符、破折号、下划线和数字。）
- Ourwebsiteismne.azbyz.com（这里没有@符号）
- [email protected]（这里顶级域名不能以点开头）
- @youmenandwe.we.net（这里不能以@符号开头）
- [email protected]（“.b”不是有效的顶级域）email.js
该文件包含电子邮件验证所需的 JavaScript 代码。 在这里，正则表达式用于在应用程序的客户端验证电子邮件。
JavaScript 代码中有效电子邮件验证的检查点：
- 描述一个正则表达式来验证一个电子邮件地址
- 如果输入值与正则表达式匹配
- 如果匹配，则发送“电子邮件地址有效”的警报。
- 如果不匹配，请发送警报“电子邮件地址无效”。
相关： Javascript中的密码验证
JavaScript 中的电子邮件验证代码
下面给出的是 JavaScript 中的电子邮件验证代码。 此代码可以验证用户创建或输入的电子邮件是否有效。 将文件另存为 filename.js。
//代码片段
函数电子邮件验证（输入电子邮件）
{
var mail_format = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if(enteredEmail.value.match(enteredEmail))
{
alert(“是的！一封有效的电子邮件！”);
document.form1.text1.focus();
返回真；
}
别的
{
alert(“对不起！一封无效的电子邮件！”);
document.form1.text1.focus();
返回假；
}
}
JavaScript 函数在 HTML 表单中使用如下。 将文件另存为 filename.html：
<!DOCTYPE html>
<html lang=”en”>
<头部>
<元字符集=”utf-8″>
<title>JavaScript 中的电子邮件验证</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div 类=“邮件”>
<h2>输入验证邮箱</h2>
<form name=”form1″ action=”#”>
<ul>
<li><input type='text' name='text1'/></li>
<li> </li>
<li class=”Validate”><input type=”submit” name=”Validate” value=”Validate” onclick=”ValidateEmail(document.form1.text1)”/></li>
<li> </li>
</ul>
</form>
</div>
<script src=”filename.js”></script>
</正文>
</html>
以下代码可以使用 CSS 向表单添加样式。 将文件另存为 filename.css。
li {列表样式类型：无；
字体大小：16pt；
}
。邮件 {
边距：自动；
填充顶部：20px；
底部填充：20px；
宽度：850 像素；
背景：RGB（150、195、208）；
边框：1px 脏 rgb(1, 20, 24);
}
.mail h2 {
左边距：36px；
}
输入 {
字体大小：28pt；
}
输入：焦点，文本区域：焦点{
背景颜色：白色；
}
输入提交{
字体大小：18pt；
}
现在您可以执行 HTML 代码并在 JavaScript 中完成电子邮件验证。
阅读： GitHub 中的 Javascript 项目
从世界顶级大学在线学习软件课程。 获得行政 PG 课程、高级证书课程或硕士课程，以加快您的职业生涯。
结论
电子邮件验证对于避免制作无效的电子邮件地址非常重要。 在本文中，通过代码解释了验证电子邮件ID是否有效，并让系统检查并通知用户输入的电子邮件ID是否无效。
如果您有兴趣了解有关全栈开发的更多信息，请查看 upGrad 和 IIIT-B 的全栈软件开发执行 PG 计划，该计划专为工作专业人士设计，提供 500 多个小时的严格培训、9 个以上的项目和任务, IIIT-B 校友身份，实用的实践顶点项目和顶级公司的工作协助。
