<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>邮箱</title>
</head>
<body>
<input type="text" name="" />
<button>提交</button>
<span></span>
<script type="text/javascript">
var ipt = document.querySelector("input");
var btn = document.querySelector("button");
var span = document.querySelector("span");
btn.onclick = function () {
var reg = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
// /^ 和 $ 表示匹配字符串的开头和结尾。
// [\w-]+ 匹配一个或多个字母、数字、下划线或连字符。
// (\.[\w-]+)* 匹配零个或多个点号后跟着一个或多个字母、数字、下划线或连字符的子串。
// @ 表示匹配邮箱地址中的 at 符号。
// [\w-]+\. 匹配一个或多个字母、数字、下划线或连字符后跟着一个点号。
// ([a-zA-Z]{2,7}) 匹配两到七个大小写字母。
if (reg.test(ipt.value)) {
span.innerText = "格式正确";
span.style.color = "green";
} else {
span.innerText = "格式不正确";
span.style.color = "red";
}
};
</script>
</body>
</html>
上述运行结果: