國際域名格式如下：域名由各國文字的特定字符集、英文字母、數字及“-”(即連字符或減號)任意組合而成, 但開頭及結尾均不能含有“-”，“-”不能連續出現 。 域名中字母不分大小寫。域名最長可達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