<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.emailerr{
150px;
height: 26px;
border: 1px solid red;
font-size: 12px;
color: red;
text-align: center;
background-color: white;
line-height: 26px;
position: absolute;
left: 220px;
top:6px;
}
.emailerr:before,.emailerr:after{
content: "";
0px;
height: 0px;
border: 6px transparent solid;
position: absolute;
display: block;
}
.emailerr:before{
top: 6px;
left: -13px;
border-right-color: red;
z-index: 0;
}
.emailerr:after{
top: 6px;
left:-12px;
border-right-color: white;
z-index: 1;
}
</style>
<script>
function email2(){
var email=document.getElementById("email");
var emailerr=document.getElementById("emailerr");
if(email.value==""){
emailerr.style.display="block";
emailerr.style.color="red";
emailerr.innerHTML="邮箱不能为空";
}else if(!email.checkValidity()){
emailerr.style.display="block";
emailerr.style.color="red";
emailerr.innerHTML="请输入有效的邮箱";
}else{
emailerr.style.displey="block";
emailerr.style.color="green";
emailerr.innerHTML="邮箱认证通过";
}
}
</script>
</head>
<body>
<form novalidate="true">
<label for="email">Email</label>
<input type="email" id="email" name="email" onblur="email2()"><div id="emailerr" class="emailerr" style="display: none;"></div><br><br>
<input type="submit" onclick="email2()">
</form>
</body>
</html>