使用者註冊----Ajax驗證（升級版）
Form.html
<html>
<head>
<title>表單驗證</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function formcheck(){
var url="formcheck";
var userid=document.getElementById("userid").value;
var userpwd=document.getElementById("userpwd").value;
var params="userid="+userid+"&userpwd="+userpwd;
sendRequest(url,params,'POST',showresult);
}
function showresult(){
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var info=httpRequest.responseText;
document.getElementById("result").innerHTML=info;
}
}
}
function checkpassword(){
var password = document.getElementById(
var repassword = document.getElementById("userpwd1").value;
if(password == ""){
alert("請輸入密碼");
document.getElementById("password").focus();
return ;
}
if(password != repassword){
alert("輸入的密碼不一致，請重新輸入");
document.getElementById("password").focus();
}
}
function checkage(){
var age = document.getElementById("age").value;
if(age<10||age>30){
alert("輸入年齡範圍應該為10歲至30歲");
document.getElementById("age").focus();
return false;
}
}
</script>
</head>
<body>
<h1 align="center"><font color="red">使用者註冊</font></h1>
<form action="">
<table border="0" align="center" width="600">
<tr><td align="right">使用者名稱:</td>
<td><input type="text" name="userid" id="userid" onblur="formcheck()"/></td>
</tr>
<tr><td align="right">性別:</td>
<td><input type="radio" name="userSex" value="男"/>男
<input type="radio" name="userSex" value="女"/>女</td>
</tr>
<tr><td align="right">密碼:</td>
<td><input type="password" name="userpwd" id="userpwd"/></td>
</tr>
<tr><td align="right">確認密碼:</td>
<td><input type="password" name="userpwd" id="userpwd1" onblur="checkpassword()"/></td>
</tr>
<tr><td align="right">年齡:</td>
<td><input type="text" name="age" id="age" onblur="checkage()"/></td>
</tr>
<tr><td colspan="3" align="center" height="40">
<input type="button" value="註冊" onclick="formcheck()"/>
<div id="result"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
FormCheck.java
package servlers;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class FormCheck extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("UTF-8");
String userid=request.getParameter("userid");
if("XXX".equals(userid)){
out.print("使用者名稱已存在");
}
}
}