/*得到最近的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.οnfοcus=
function(){
    sp.innerHTML=error;
    sp.className=
"stat2";
  }
  obj.οnblur=
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>