进一步简化封装

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
form{
  width:300px;
  background:pink;
  text-align: center;
  padding:30px 0;
  margin:100px auto;
}
</style>
</head>
<body>
<form id="form">
  <p>
   <input type="text" name="name" id="username" placeholder="请输入账户名">
  </p>
  <span></span>
  <p>
   <input type="text" name="chinaName" id="chinaName" placeholder="请输入中文名">
  </p>
  <span></span>
  <p>
   <input type="email" name="eamil" id="email" placeholder="请输入邮箱">
  </p>
  <span></span>
  <p>
   <input type="submit" value="注册" id="submit">
  </p>
</form>
<script type="text/javascript">
var spans=document.getElementsByTagName("span");
var username=document.getElementById("username");
var chinaName=document.getElementById("chinaName");
var email=document.getElementById("email");
var submit=document.getElementById("submit");
var input1=false;
var input2=false;
var input3=false;
var len=spans.length;
console.log(len)
//验证正则
var reg={
  'zhanghu':/^\w{6,18}$/,
  'xingming':/^[\u4e00-\u9fa5]{2,5}$/,
  'email':/^\w+@\w+\.[a-zA-Z_]{2,4}$/,
}
username.onfocus=function(){
  spans[0].innerHTML="请输入账户名";
  spans[0].style.color="green";
}
username.onblur=function(){
  if(this.value==""){
   spans[0].innerHTML="账号不能为空";
   spans[0].style.color="red";
  }else{
   if(!reg.zhanghu.exec(username.value)){
    spans[0].innerHTML="请输入正确的账户名";
    spans[0].style.color="red";
   }else{
    spans[0].innerHTML="账户正确";
    spans[0].style.color="green";
    input1=true;
   }
  }
}
chinaName.onfocus=function(){
  spans[1].innerHTML="请输入中文名";
  spans[1].style.color="green";
}
chinaName.onblur=function(){
  if(this.value==""){
   spans[1].innerHTML="名字不能为空";
   spans[1].style.color="red";
  }else{
   if(!reg.xingming.exec(chinaName.value)){
    spans[1].innerHTML="请输入正确的名字";
    spans[1].style.color="red";
   }else{
    spans[1].innerHTML="名字正确";
    spans[1].style.color="green";
    input2=true;
   }
  }
}
email.onfocus=function(){
  spans[2].innerHTML="请输入邮箱";
  spans[2].style.color="green";
}
email.onblur=function(){
  if(this.value==""){
   spans[2].innerHTML="邮箱不能为空";
   spans[2].style.color="red";
  }else{
   if(!reg.email.exec(email.value)){
    spans[2].innerHTML="请输入正确的邮箱";
    spans[2].style.color="red";
   }else{
    spans[2].innerHTML="邮箱正确";
    spans[2].style.color="green";
    input3=true;
   }
  }
}
submit.onclick=function(){
  if(input1==false || input2==false || input3==false){
   alert("注册失败");
  }else{
   alert("注册成功");
  }
}
</script>
</body>
</html>