/*得到最近的SPAN标签*/
function getspan(cobj){
  while(true){
    if(cobj.nextSibling.nodeName!="SPAN")
        cobj=cobj.nextSibling;
      else
        return cobj.nextSibling;
  }
}

/*
  通用的检测函数
  obj:检测的对象
  error:检查出错的信息
  fun:回调函数,检测输入的值是否符合规则
  click:状态,判断是点击提交按钮 还是失去焦点

*/


function check(obj,error,fun,click){
  var sp=getspan(obj);
  obj.onfocus=function(){
    sp.innerHTML=error;
    sp.className="stat2";
  }
  obj.onblur=function(){
    if(fun(this.value)){
      sp.innerHTML="OK!";
      sp.className="stat4";
    }else{
      sp.innerHTML=error;
      sp.className="stat3";
    }
  }
  if(click=="click")
    obj.onblur();

}

/*加载页面调用*/

function regs(click){
  var stat=true;
  var username=document.getElementsByName("username")[0];
  var password=document.getElementsByName("password")[0];
  var repass=document.getElementsByName("repass")[0];
  var email=document.getElementsByName("email")[0];
  check(username,"用户名长度必须在6-15位之间",function(val){
    if(val.match(/^\S+$/) && val.length>=6 && val.length<=15){
      return true;
    }else{
      stat=false;
      return false;
    }
  },click);

  check(password,"密码长度必须在6-10位之间",function(val){
    if(val.match(/^\S+$/) && val.length>=6 && val.length<=10){
      return true;
    }else{
      stat=false;
      return false;
    }
  },click);

  check(repass,"必须和上面的相同,并且规则也一样",function(val){
    if(val.match(/^\S+$/) && val.length>=6 && val.length<=10 && val==password.value){
      return true;
    }else{
      stat=false;
      return false;
    }
  },click);

  check(email,"邮箱格式不对",function(val){
    if(val.match(/\w+@\w+\.\w/)){
      return true;
    }else{
      stat=false;
      return false;
    }
  },click);
  return stat;

}
 
 
<html>
<head>
<script src="check.js"></script>
<style>
  .stat1{
    color:#aaa;
  }
  .stat2{
    color:#000;
  }
  .stat3{
    color:red;
  }
  .stat4{
    color:green;
  }
</style>
</head>
<body>
<form action="reg.php" method="post" onsubmit="return regs('click');">
    username:<input type="text" name="username" value="">
    <span class="stat1"></span><br>
    password:<input type="text" name="password" value="">
    <span class="stat1"></span><br>
    repass:<input type="text" name="repass" value="">
    <span class="stat1"></span><br>
    email:<input type="text" name="email" value="">
    <span class="stat1"></span><br>
    submit:<input type="submit" name="sub" value="submit">
</form>
</body>
</html>