输入邮箱：<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>

/*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';

  }

}

#notice{

  font-szie:14px;

  font-family:SimHei

}

div{

  color:red;

  margin-top:30px;

}

p{

  color:red;

  padding-left: 30px;

}