JavaScript 邮箱验证

​x
 
<!DOCTYPE html>
<html>
<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>
HTML