电子邮件验证

JavaScript：HTML表单 - 电子邮件验证

电子邮件验证

验证电子邮件是验证HTML表单时的重要环节。本页讨论了如何使用JavaScript验证电子邮件：

电子邮件是由@符号分隔为两部分的字符串（ASCII字符子集），即"personal_info"（个人信息）和域名的组合，格式为personal_info@domain。其中：personal_info部分长度上限为64个字符，域名部分长度上限为253个字符。

personal_info部分包含以下ASCII字符。

大写字母（A-Z）与小写字母（a-z）的英文字母。
数字（0-9）。
字符! # $ % & ' * + - / = ? ^ _ ` { | } ~
字符"."（句点、点或句号），要求该字符不得作为第一个或最后一个字符，且不得连续出现。

域名部分[例如com、org、net、in、us、info]可包含字母、数字、连字符及点号。

有效电子邮件地址示例

mysite@ourearth.com
my.ownsite@ourearth.org
mysite@you.me.net

无效电子邮件ID示例

mysite.ourearth.com [没有@符]
mysite@.com.my [ tld (顶级域名) 不能以 "." 符号开头 ]
@you.me.net [@前无字符]
mysite123@gmail.b [ ".b" 不是一个有效的顶级域名 tld ]
mysite@.org.org [ tld 顶级域名不能以 "." 符号开头 ]
.mysite@mysite.org [ 不能以符号 "." 作为开头 ]
mysite()*@gmail.com [ 不能使用除了字母、数字、下划线、连字符以外的特殊字符 ]
mysite..1234@yahoo.com [ 连续的点号不能使用 ]

验证电子邮箱地址的JavaScript代码

function ValidateEmail(mail) 
{
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
  {
    return (true)
  }
    alert("You have entered an invalid email address!")
    return (false)
}

执行一下

要获取有效的电子邮件ID，我们使用正则表达式/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/。根据http://tools.ietf.org/html/rfc3696#page-5在电子邮件地址的本地部分中，字符 ! # $ % & ' * + - / = ? ^ ` . { | } ~是合法字符，但上述正则表达式将这些字符过滤排除。您可以修改或重写所述的正则表达式。

流程图：

正则表达式模式

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

执行一下

在HTML表单中应用上述JavaScript函数。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking email</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an email and Submit</h2>
<form name="form1" action="#"> 
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="ValidateEmail(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="email-validation.js"></script>
</body>
</html>

执行一下

JavaScript代码

function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
alert("Valid email address!");
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}

执行一下

CSS代码

li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}

执行一下

在浏览器中查看JavaScript邮箱验证功能

RFC 2822 标准电子邮件验证

正则表达式模式 （原文Ref: https://bit.ly/33cv2vn）：

/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|
\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|
\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:
(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/

执行一下

在浏览器中查看遵循RFC 2822标准的JavaScript邮箱验证功能

您可使用以下电子邮件地址测试所述正则表达式：

(引用自：https://bit.ly/35g81dj)

有效电子邮件地址列表

email@example.com
firstname.lastname@example.com
email@subdomain.example.com
firstname+lastname@example.com
email@123.123.123.123
email@[123.123.123.123]
"email"@example.com
1234567890@example.com
email@example-one.com
_______@example.com
email@example.name
email@example.museum
email@example.co.jp
firstname-lastname@example.com

怪异有效电子邮件地址列表

much.”more\ unusual”@example.com
very.unusual.”@”.unusual.com@example.com
very.”(),:;<>[]”.VERY.”very@\\ "very”.unusual@strange.example.com

file_download从此处下载验证码。

其他JavaScript验证：

上一篇：JavaScript：HTML表单 - 限制输入长度
下一篇：JavaScript：HTML表单 - 日期验证

JavaScript

JavaScript 入门教程

电子邮件验证

JavaScript：HTML表单 - 电子邮件验证

电子邮件验证

RFC 2822 标准电子邮件验证