Ajax实现表单数据验证

一：实现表单数据验证：（这里使用的是responseText,"Post"方法发送请求）

客户端：index.jsp

首先是form表单：

<form action="#">  
      <div align="center">  
       <table border="1" >  
        <tr>
	    <td align="center"> 昵称： <input id="userName"/>
	    <div id="nameInfo"></div><br/>
	    </td>
        </tr>  
        <tr>
	     <td>请输入密码： <input type="password" id="passWord"/>
	     <div id="passwordInfo"></div><br/>
	     </td>
     </tr>  
     <tr>
	     <td> 请再次输入密码： <input type="password" id="passWord1"/>
	     <div id="password1Info"></div><br/>
	     </td>
     </tr>  
     <tr>
         <td><input type="button" value="注册"  onclick="exec(); "/></td>
     </tr>  
      </table>  
     </div>  
    </form>

 js代码：

<script type="text/javascript">  
    var xmlHttp;  
       var name;  
       var password;  
       var password1;  
    function createXMLHttpRequest(){  
       if(window.ActiveXObject) {  
         xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequet对象  
       }  
      else if (window.XMLHttpRequest) {  
         xmlHttp=new XMLHttpRequest();//创建XMLHttpRequet对象  
         }  
     }  
     //向服务器发送请求
    function startRequest() {  
     createXMLHttpRequest();  //创建对象方法
         
     xmlHttp.onreadystatechange=handleStateChange;  //核心处理
     xmlHttp.open("POST", "register", true);  
     var str="name="+name;  
     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //重点：一定要将请求头加上 
     xmlHttp.send(str);  //post与get的参数发送方式的区别
     }  
    function handleStateChange() {  
      if(xmlHttp.readyState==4) {  
     if(xmlHttp.status==200) {  
      if( xmlHttp.responseText==1)  //获得服务器响应
      document.getElementById("nameInfo").innerHTML="<font color='red'>该昵称已存在</font>";  
      else  
      alert("恭喜你，注册成功！");  
         }  
      }  
    }  
    function check(){  
    if(name==""){  
    document.getElementById("nameInfo").innerHTML="<font color='red'>昵称不能为空！</font>";  
    return false;  
    }  
    else if(password==""){  
    document.getElementById("passwordInfo").innerHTML="<font color='red'>密码不能为空！</font>";  
    return false;  
    }  
    else if(password1==""){  
    document.getElementById("password1Info").innerHTML="<font color='red'>密码不能为空！</font>";  
    return false;  
    }  
    else if(password!=password1){  
    document.getElementById("password1Info").innerHTML="<font color='red'>两次输入的密码不一致！</font>";  
    return false;  
    }  
    else {  
    clear();  
    return true;  
    }  
    }
    //1：首先执行onclick动作  
    function exec(){  
    clear();  //将红色提示信息清除
    name=document.getElementById("userName").value;  
    password=document.getElementById("passWord").value;  
    password1=document.getElementById("passWord1").value;  
    if(check()==true){  //2:数据格式验证
    startRequest();   //3:其次向服务器发送请求
    }  
    }  
    function clear(){  
    document.getElementById("nameInfo").innerHTML="";  
    document.getElementById("passwordInfo").innerHTML="";  
    document.getElementById("password1Info").innerHTML="";  
    }  
    </script>

 服务器：servet代码：（省略conn.java和dao层）

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		UserDao dao = new UserDao();
		String name = request.getParameter("name");
		boolean flag = dao.selectUser(name);
		if(flag){
			out.print("1");
			System.out.print("测试成功");
		}else{
			dao.inserUser(name);
		}
	}

 其中用到了两个sql语句：

String sql = "insert into user (name) values ('"+name+"')";
String sql = "select * from user where name='"+name+"'";