本教程有助于学习如何在JavaScript中使用正则表达式（regex）验证电子邮件。它有不止一个关于如何进行电子邮件验证的例子。
这些例子在使用的正则表达式模式和对输入邮件的处理上有所不同。
下面的快速例子使用了一个带有JavaScript*match()*函数的regex模式来验证电子邮件。在找到匹配项之前，它将输入的电子邮件转换为小写。
快速例子
const validateEmail = (email) => {
return String(email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-z\-0-9]+\.)+[a-z]{2,}))$/
);
};
测试结果
当收到一个无效的电子邮件格式时，它返回null。否则，它返回一个与regex匹配的内容数组。
Input: vincy#example
Output: null.
Input: vincy@example.com
Output: vincy@example.co,vincy,vincy,,,example.co,,example.co,example.
在JavaScript中使用regex进行简单的电子邮件验证
这个简单的电子邮件验证脚本对输入的电子邮件字符串做一个基本的检查。
如果输入的电子邮件具有预期的格式，无论其长度和数据类型如何，它都会进行验证。
我添加这个例子只是为了了解如何在JavaScript中用regex做基于模式的验证。
我更喜欢使用快速的例子，严格的验证例子如下。
simple-validation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Simple Email Validation using Regular
Expression (regex)</title>
<link rel='stylesheet' href='style.css' type='text/css' />
<link rel='stylesheet' href='form.css' type='text/css' />
</head>
<body>
<div class="phppot-container">
<h1>JavaScript Simple Email Validation using Regular
Expression (regex)</h1>
<div class="tile-container">
<form name="form">
<div class="row">
<label for="email">Email address: </label> <input
id="email" name="email" />
</div>
<div class="row">
<input type="submit" name="submit" value="Submit"
onclick="validateEmail(document.form.email)" />
</div>
</form>
</div>
</div>
<script>
function matchEmailRegex(emailStr) {
var emailRegex = /\S+@\S+\.\S+/;
return emailStr.match(emailRegex);
};
// validates in the form anystring@anystring.anystring
// no more fancy validations
function validateEmail(emailField) {
var emailStr = emailField.value;
if (matchEmailRegex(emailStr)) {
alert("Entered value is a valid email.");
} else {
alert("Entered value is not an email.");
}
return false;
}
</script>
</body>
</html>
测试结果
Input: vincy
Output: Entered value is not an email.
Input: vincy@example.c
Output: Entered value is a valid email.
如何在JavaScript中进行严格的电子邮件验证
这个例子使用了与快速例子中几乎相似的regex模式。但是，它处理了JavaScript匹配的返回值来输出验证信息。
它给出了一个代码，可以直接包含在应用程序的验证脚本中，以验证一个表单的电子邮件输入。
alert()可以用任何形式来代替，让终端用户知道验证状态。
strict-validation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Validate Email using Regular Expression
(regex)</title>
<link rel='stylesheet' href='style.css' type='text/css' />
<link rel='stylesheet' href='form.css' type='text/css' />
</head>
<body>
<div class="phppot-container">
<h1>JavaScript Validate Email using Regular Expression
(regex)</h1>
<div class="tile-container">
<form name="form">
<div class="row">
<label for="email">Email address: </label> <input
id="email" name="email" />
</div>
<div class="row">
<input type="submit" name="submit" value="Submit"
onclick="validateEmail(document.form.email)" />
</div>
</form>
</div>
</div>
<script>
function matchEmailRegex(emailStr) {
var emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return emailStr.match(emailRegex);
};
function validateEmail(emailField) {
var emailStr = emailField.value;
if (matchEmailRegex(emailStr)) {
alert("Entered value is a valid email.");
} else {
alert("Entered value is not an email.");
}
return false;
}
</script>
</body>
</html>
测试结果
与简单的例子不同，它严格验证了带有允许的特殊字符的电子邮件前缀。
它还检查域名格式以验证电子邮件。下面的结果显示了JavaScript电子邮件验证的测试案例和各自的输出。
Input: vincy
Output: Entered value is not an email.
Input: vincy@example.c
Output: Entered value is not an email.
Input: vincy@example.com
Output: Entered value is a valid email.
