<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
</head>
<script type="text/javascript">
var xmlHttp=false;
var username=true;
var password1=false;
var password2=false;
var emailcheck=false;
function createXMLHttpRequest() 
{
if (window.ActiveXObject)                        //在IE浏览器中创建XMLHttpRequest对象
{
try{
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
catch(e){
try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
               }
   catch(ee){
                 xmlHttp=false;
               }
}
    }
else if (window.XMLHttpRequest)               //在非IE浏览器中创建XMLHttpRequest对象
{
try{
            xmlHttp = new XMLHttpRequest();
        }
catch(e){
            xmlHttp=false;
        }
   }
}
function checkName()
{
createXMLHttpRequest();   //调用创建XMLHttpRequest对象的方法
xmlHttp.onreadystatechange=callback;   //设置回调函数
var nameStr=form1.name.value;
var url="servlet/CheckName?name="+nameStr;
xmlHttp.open("post",url);      //向服务器端发送请求
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gb2312");
xmlHttp.send(null);
function callback()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
              var str = xmlHttp.responseText;
              var nameText=document.getElementById("nameText");             
              if(nameStr.length>=4 && nameStr.length<=12)
              {                
                if(str.length==2)
                {
                   var message="<font color=\"#CC0000\"><b>*用户名已经存在,请另选一个注册!</b></font>";
                   nameText.innerHTML=message;
                   username=false;
                }
                else
                {
                   var message="<font color=\"green\"><b>OK</b></font>";
                   nameText.innerHTML=message;
                }
              }
              else
              {
               var message="<font color=\"#CC0000\"><b>字符控制在4-12之间!</b></font>";
                  nameText.innerHTML=message;
                  username=false;
              }
            } 
}
}
}function checkPass1()
{
  var pass1=form1.pass1.value;
  var pass1Text=document.getElementById("pass1Text");
  if(pass1.length>=20||pass1.length<=6)
  {
    var message="<font color=\"#CC0000\"><b>*密码长度不合法</b></font>";
    pass1Text.innerHTML=message;
    password1=false;
  }else
  {
    var message="<font color=\"green\"><b>OK</b></font>";
    pass1Text.innerHTML=message;
  }
}function checkPass2()
{
  var pass2Text=document.getElementById("pass2Text");
  
  if(form1.pass1.value!=form1.pass2.value)
  {
password2=false;
    var message="<font color=\"#CC0000\"><b>*两次输入的密码不一致</b></font>";
    pass2Text.innerHTML=message;
  }else
  {
    var message="<font color=\"green\"><b>OK</b></font>";
    pass2Text.innerHTML=message;
  }
}
function checkEmail()
{
   var emailText=document.getElementById("emailText");
  var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.com)+/;
  if(!pattern.test(form1.email.value))
   {
    var message="<font color=\"#CC0000\"><b>格式不正确,请检查!</b></font>";
    emailText.innerHTML=message;
    emailcheck=false;
  }else
  {
    var message="<font color=\"green\"><b>OK</b></font>";
    emailText.innerHTML=message;
  };
}function checkAll()
{
if(username==false)
{
alert("输入有误,请检查更正!");
}
    if(password1==false)
    {
    alter("输入有误,请检查更正!");   
    }
if(password2==false)
{
    alter("输入有误,请检查更正!");
}
    if(emailcheck==false)
{
    alter("输入有误,请检查更正!");
}
    if(form1.sex.value=="")
    {
    alter("输入有误,请检查更正!");
}
}
</script>
<body>
<form action="" name="form1" method="post" action="servlet/Regist">
    <table width="500" cellspacing="30">  
          <tr align="center">  
             <td>
                  <font size="3">用户名:&nbsp;&nbsp;&nbsp;&nbsp;</font>
                  <input type="text" name="name" size="27" onchange="checkName()"/>
                  <div id="nameText"><font id="a" color="green">(请认真填写,此项不能为空)</font></div>
             </td> 
          </tr>  
          
          <tr align="center">  
             <td>
                  <font size="3">密&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;</font>
                  <input type="password" name="pass1" size="27" onchange="checkPass1()"/>
                  <div id="pass1Text"><font id="a" color="green">(请牢记密码,此项不能为空。)</font></div>
             </td>
          </tr>  
          
          <tr align="center">  
             <td>
                 <font size="3">确认密码:&nbsp;</font>
                 <input name="pass2" size="27" type="password" onchange="checkPass2()"/>
                 <div id="pass2Text"><font id="a" color="green">(请再次输入密码,不能为空。)</font></div>    
             </td>  
          </tr>
           
          <tr align="center">  
             <td>
                 <font size="3">邮&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;&nbsp;&nbsp;</font>
                 <input name="email" type="text" size="27" onchange="checkEmail()"/>
                 <div id="emailText"><font id="a" color="green">(请注意格式,如:[email protected])</font></div>
             </td> 
          </tr>
           
          <tr align="center">  
             <td>
                 <font size="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性&nbsp;&nbsp;&nbsp;别:</font>
                 <input type="radio" name="sex" value="male"/><font size="3">男</font>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <input type="radio" name="sex" value="female"/><font size="3">女</font>
             </td>  
          </tr> 
          <tr align="right"> 
             <td>
             <input type="submit" name="button" value="注册" onclick="checkAll()"/>
             &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
             <input type="reset" value="重置"/>
             </td> 
          </tr> 
        </table>    
</form>
</body>
</html>

解决方案 »

  1.   

    checkEmail()会不会有问题?先让他弹个message试试
      

  2.   

    超级强悍的楼主
    1:sumbit想要先检测再发送表单,onclic="return checkAll()"
    2:alert为啥你可以写成alter却毫无所觉捏?
    完整代码修正如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>注册</title>
    </head>
    <script type="text/javascript">
    var xmlHttp=false;
    var username=false;//我为了测试将你默认的不需要验证改为了需要验证
    var password1=false;
    var password2=false;
    var emailcheck=false;
    function createXMLHttpRequest()  
    {
    if (window.ActiveXObject) //在IE浏览器中创建XMLHttpRequest对象
    {
    try{
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch(e){
    try{
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch(ee){
      xmlHttp=false;
      }
    }
      }
    else if (window.XMLHttpRequest) //在非IE浏览器中创建XMLHttpRequest对象
    {
    try{
      xmlHttp = new XMLHttpRequest();
      }
    catch(e){
      xmlHttp=false;
      }
      }
    }
    function checkName()
    {
    createXMLHttpRequest(); //调用创建XMLHttpRequest对象的方法
    xmlHttp.onreadystatechange=callback; //设置回调函数
    var nameStr=form1.name.value;
    var url="servlet/CheckName?name="+nameStr;
    xmlHttp.open("post",url); //向服务器端发送请求
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gb2312");
    xmlHttp.send(null); 
    function callback()
    {
    if(xmlHttp.readyState==4)
    {
    if(xmlHttp.status==200)
    {
      var str = xmlHttp.responseText;
      var nameText=document.getElementById("nameText");   
      if(nameStr.length>=4 && nameStr.length<=12)
      {   
      if(str.length==2)
      {
      var message="<font color=\"#CC0000\"><b>*用户名已经存在,请另选一个注册!</b></font>";
      nameText.innerHTML=message;
      username=false;
      }
      else
      {
      var message="<font color=\"green\"><b>OK</b></font>";
      nameText.innerHTML=message;
      username=true;
      }
      }
      else
      {
      var message="<font color=\"#CC0000\"><b>字符控制在4-12之间!</b></font>";
      nameText.innerHTML=message;
      username=false;
      }
      }  

    }
    }function checkPass1()
    {
      var pass1=form1.pass1.value;
      var pass1Text=document.getElementById("pass1Text");
      if(pass1.length>=20||pass1.length<=6)
      {
      var message="<font color=\"#CC0000\"><b>*密码长度不合法</b></font>";
      pass1Text.innerHTML=message;
      password1=false;
      }else
      {
      var message="<font color=\"green\"><b>OK</b></font>";
      pass1Text.innerHTML=message;
      password1=true;
      }
    }function checkPass2()
    {
      var pass2Text=document.getElementById("pass2Text");
       
      if(form1.pass1.value!=form1.pass2.value)
      {
        password2=false;
      var message="<font color=\"#CC0000\"><b>*两次输入的密码不一致</b></font>";
      pass2Text.innerHTML=message;
      }else
      {
      var message="<font color=\"green\"><b>OK</b></font>";
      pass2Text.innerHTML=message;
      password2=true;
      }
    }
    function checkEmail()
    {
      var emailText=document.getElementById("emailText");
      var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.com)+/;
      if(!pattern.test(form1.email.value))
      {
      var message="<font color=\"#CC0000\"><b>格式不正确,请检查!</b></font>";
      emailText.innerHTML=message;
      emailcheck=false;
      }else
      {
      var message="<font color=\"green\"><b>OK</b></font>";
      emailText.innerHTML=message;
      emailcheck=true;
      };
    }function checkAll()
    {
    if(!username)
    {
    alert("用户名输入有误,请检查更正!");
    form1.name.focus();
    return false;}  if(!password1)
      {
    alert("密码输入有误,请检查更正!"); 
    form1.pass1.focus();
    return false;  
      }if(!password2)
    {
    alert("确认密码输入有误,请检查更正!");
    form1.pass2.focus();
    return false;}  if(!emailcheck)
    {
    alert("邮箱输入有误,请检查更正!");
    form1.email.focus();
    return false;}  if(form1.sex.value=="")
      {
    alert("输入有误,请检查更正!");
    return false;}
    return true;}
    </script>
    <body>
    <form action="" name="form1" method="post" action="servlet/Regist">
      <table width="500" cellspacing="30">   
      <tr align="center">   
      <td>
      <font size="3">用户名:&nbsp;&nbsp;&nbsp;&nbsp;</font>
      <input type="text" name="name" size="27" onchange="checkName()"/>
      <div id="nameText"><font id="a" color="green">(请认真填写,此项不能为空)</font></div>
      </td>  
      </tr>   
        
      <tr align="center">   
      <td>
      <font size="3">密&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;</font>
      <input type="password" name="pass1" size="27" onchange="checkPass1()"/>
      <div id="pass1Text"><font id="a" color="green">(请牢记密码,此项不能为空。)</font></div>
      </td>
      </tr>   
        
      <tr align="center">   
      <td>
      <font size="3">确认密码:&nbsp;</font>
      <input name="pass2" size="27" type="password" onchange="checkPass2()"/>
      <div id="pass2Text"><font id="a" color="green">(请再次输入密码,不能为空。)</font></div>   
      </td>   
      </tr>
        
      <tr align="center">   
      <td>
      <font size="3">邮&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;&nbsp;&nbsp;</font>
      <input name="email" type="text" size="27" onchange="checkEmail()"/>
      <div id="emailText"><font id="a" color="green">(请注意格式,如:[email protected])</font></div>
      </td>  
      </tr>
        
      <tr align="center">   
      <td>
      <font size="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性&nbsp;&nbsp;&nbsp;别:</font>
      <input type="radio" name="sex" value="male"/><font size="3">男</font>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="radio" name="sex" value="female"/><font size="3">女</font>
      </td>   
      </tr>  
      <tr align="right">  
      <td>
      <input type="submit" name="button" value="注册" onclick="return checkAll()"/>
      &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      <input type="reset" value="重置"/>
      </td>  
      </tr>  
      </table>   
    </form>
    </body>
    </html>
      

  3.   

    晕,代码块里不能标记颜色的么?
    再放过一份吧
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>注册</title>
    </head>
    <script type="text/javascript">
    var xmlHttp=false;
    var username=false;
    var password1=false;
    var password2=false;
    var emailcheck=false;
    function createXMLHttpRequest()  
    {
    if (window.ActiveXObject) //在IE浏览器中创建XMLHttpRequest对象
    {
    try{
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch(e){
    try{
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch(ee){
      xmlHttp=false;
      }
    }
      }
    else if (window.XMLHttpRequest) //在非IE浏览器中创建XMLHttpRequest对象
    {
    try{
      xmlHttp = new XMLHttpRequest();
      }
    catch(e){
      xmlHttp=false;
      }
      }
    }
    function checkName()
    {
    createXMLHttpRequest(); //调用创建XMLHttpRequest对象的方法
    xmlHttp.onreadystatechange=callback; //设置回调函数
    var nameStr=form1.name.value;
    var url="servlet/CheckName?name="+nameStr;
    xmlHttp.open("post",url); //向服务器端发送请求
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gb2312");
    xmlHttp.send(null); 
    function callback()
    {
    if(xmlHttp.readyState==4)
    {
    if(xmlHttp.status==200)
    {
      var str = xmlHttp.responseText;
      var nameText=document.getElementById("nameText");   
      if(nameStr.length>=4 && nameStr.length<=12)
      {   
      if(str.length==2)
      {
      var message="<font color=\"#CC0000\"><b>*用户名已经存在,请另选一个注册!</b></font>";
      nameText.innerHTML=message;
      username=false;
      }
      else
      {
      var message="<font color=\"green\"><b>OK</b></font>";
      nameText.innerHTML=message;
      username=true;
      }
      }
      else
      {
      var message="<font color=\"#CC0000\"><b>字符控制在4-12之间!</b></font>";
      nameText.innerHTML=message;
      username=false;
      }
      }  

    }
    }function checkPass1()
    {
      var pass1=form1.pass1.value;
      var pass1Text=document.getElementById("pass1Text");
      if(pass1.length>=20||pass1.length<=6)
      {
      var message="<font color=\"#CC0000\"><b>*密码长度不合法</b></font>";
      pass1Text.innerHTML=message;
      password1=false;
      }else
      {
      var message="<font color=\"green\"><b>OK</b></font>";
      pass1Text.innerHTML=message;
      password1=true;
      }
    }function checkPass2()
    {
      var pass2Text=document.getElementById("pass2Text");
       
      if(form1.pass1.value!=form1.pass2.value)
      {
        password2=false;
      var message="<font color=\"#CC0000\"><b>*两次输入的密码不一致</b></font>";
      pass2Text.innerHTML=message;
      }else
      {
      var message="<font color=\"green\"><b>OK</b></font>";
      pass2Text.innerHTML=message;
      password2=true;
      }
    }
    function checkEmail()
    {
      var emailText=document.getElementById("emailText");
      var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.com)+/;
      if(!pattern.test(form1.email.value))
      {
      var message="<font color=\"#CC0000\"><b>格式不正确,请检查!</b></font>";
      emailText.innerHTML=message;
      emailcheck=false;
      }else
      {
      var message="<font color=\"green\"><b>OK</b></font>";
      emailText.innerHTML=message;
      emailcheck=true;
      };
    }function checkAll()
    {
    if(!username)
    {
    alert("用户名输入有误,请检查更正!");
    form1.name.focus();
    return false;
    }  if(!password1)
      {
    alert("密码输入有误,请检查更正!"); 
    form1.pass1.focus();
    return false;  
      }if(!password2)
    {
    alert("确认密码输入有误,请检查更正!");
    form1.pass2.focus();
    return false;
    }  if(!emailcheck)
    {
    alert("邮箱输入有误,请检查更正!");
    form1.email.focus();
    return false;
    }  if(form1.sex.value=="")
      {
    alert("输入有误,请检查更正!");
    return false;
    }
    return true;
    }
    </script>
    <body>
    <form action="" name="form1" method="post" action="servlet/Regist">
      <table width="500" cellspacing="30">   
      <tr align="center">   
      <td>
      <font size="3">用户名:&nbsp;&nbsp;&nbsp;&nbsp;</font>
      <input type="text" name="name" size="27" onchange="checkName()"/>
      <div id="nameText"><font id="a" color="green">(请认真填写,此项不能为空)</font></div>
      </td>  
      </tr>   
        
      <tr align="center">   
      <td>
      <font size="3">密&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;</font>
      <input type="password" name="pass1" size="27" onchange="checkPass1()"/>
      <div id="pass1Text"><font id="a" color="green">(请牢记密码,此项不能为空。)</font></div>
      </td>
      </tr>   
        
      <tr align="center">   
      <td>
      <font size="3">确认密码:&nbsp;</font>
      <input name="pass2" size="27" type="password" onchange="checkPass2()"/>
      <div id="pass2Text"><font id="a" color="green">(请再次输入密码,不能为空。)</font></div>   
      </td>   
      </tr>
        
      <tr align="center">   
      <td>
      <font size="3">邮&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;&nbsp;&nbsp;</font>
      <input name="email" type="text" size="27" onchange="checkEmail()"/>
      <div id="emailText"><font id="a" color="green">(请注意格式,如:[email protected])</font></div>
      </td>  
      </tr>
        
      <tr align="center">   
      <td>
      <font size="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性&nbsp;&nbsp;&nbsp;别:</font>
      <input type="radio" name="sex" value="male"/><font size="3">男</font>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="radio" name="sex" value="female"/><font size="3">女</font>
      </td>   
      </tr>  
      <tr align="right">  
      <td>
      <input type="submit" name="button" value="注册" onclick="return checkAll()"/>
      &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      <input type="reset" value="重置"/>
      </td>  
      </tr>  
      </table>   
    </form>
    </body>
    </html>
      

  4.   

    谢谢crying_boy,我找到问题所在了,thank you给分给分!!!