用正则表达式-验证邮箱
国际域名格式如下：域名由各国文字的特定字符集、英文字母、数字及“-”(即连字符或减号)任意组合而成, 但开头及结尾均不能含有“-”，“-”不能连续出现 。 域名中字母不分大小写。域名最长可达60个字节(包括后缀.com、.net、.org等)。
正则匹配表达式：/^\w[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})$/i；
说明：
①/规则表达式/修饰符 构成一个不区分大小写的正则表达式；^ 匹配开始；$ 匹配结束。
②[a-z] E-Mail前缀必需是一个英文字母开头。
③([a-z0-9]*[-_]?[a-z0-9]+)* 和_a_2、sdf112、_1_a_2匹配，和a1_、avwfd_163p_、a__dd不匹配，如果是空字符，也是匹配的，*表示0个或者多个。
④*表示0个或多个前面的字符。
⑤[a-z0-9]* 匹配0个或多个英文字母或者数字；[-_]? 匹配0个或1“-”，因为“-”不能连续出现。
⑥[a-z0-9]+ 匹配1个或多个英文字母或者数字，因为“-”不能做为结尾。
⑦@ 必需有个有@。
⑧([a-z0-9]*[-_]?[a-z0-9]+)+ 见上面([a-z0-9]*[-_]?[a-z0-9]+)*解释，但是不能为空，+表示一个或者为多个。
⑨[\.] 将特殊字符转义成(.)当成普通字符；[a-z]{2,3} 匹配2个至3个英文字母，一般为com或者net等。
⑩([\.][a-z]{2}) 匹配0个或者1个[\.][a-z]{2}(比如.cn等) ，不知道一般.com.cn最后部分是不是都是两位, 如果不是修改{2}为{起始字数,结束字数}，如果不是修改为{1，3}{起始字数,结束字数}。
正则表达式验证邮箱地址
邮箱@前缀的几种类型：
1、纯数字 123456@qq.com
2、纯字母 lisi@qq.com
3、字母数字混合 lisi1234@qq.com
4、带点的 li.si@qq.com
5、带下划线 li_si@qq.com
6、带连接线 li-si@qq.com
邮箱@后缀的类型：
1、123456@qq.com
2、123456@qq.qq.com
*至少有两处单词
*顶级域名一般为2~4位（如cn、com、org 、net）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邮箱验证</title>
<style>
#notice{
font-szie:14px;
font-family:SimHei
}
div{
color:red;
margin-top:30px;
}
p{
color:red;
padding-left: 30px;
}
</style>
</head>
<body>
Email：<input type="text" id="texts" value=""/>
<span id="notice"></span>
<div>规则：</div>
<p>1、不能以0字开头 </p>
<p>2、@ </p>
<p>3、必须是数字与字母组成，长度为2-10位</p>
<p>4、结尾一组，字母长度为2-4位</p>
<p>5、 .字母，最少一组，最多三组</p>
<script>
/*id是全局唯一的，不需要获取元素，直接使用*/
let re = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
//绑定文本输入时触发的事件
texts.oninput = function () {
let textBox = this.value;
//判断检测这个值是否正确，
if(re.test(textBox)){//如果验证正确执行以下代码
notice.innerHTML = '邮箱验证成功';
notice.style.color = 'plum';
}else {//验证不成功，执行以下代码
notice.innerHTML = '邮箱验证不成功，请重新输入';
notice.style.color = 'green';
}
}
</script>
</body>
</html>
WEB前端学习交流群21 598399936
