界面
jsp代碼比較簡單，偷了點懶沒用table：
<%@ 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">
<script type="text/javascript" src="../js/jquery-1.3.1.js"></script>
<title>註冊</title>
</head>
<body><center>
<h2>歡迎註冊</h2>
<span>身份選擇</span>
<select name=identity style="width: 140px;font-size:16px;height: 30px" id="identity" onchange="changed();">
<option value=教師>教師</option>
<option value=學生>學生</option>
</select>
<br>
<br>
<span>職 稱</span>
<select name=title style="width: 140px;font-size:16px;height: 30px" id="title" >
<option value=無>無</option>
<option value=教授>教授</option>
<option value=副教授>副教授</option>
<option value=講師>講師</option>
</select>
<br>
<br>
<span>用 戶 名</span>
<input style="width: 140px;height: 20px" type="text" id="username" onblur="checkUsername();"/>
<font color="red" id="umExit"></font>
<br>
<br>
<span>用戶密碼</span>
<input style="width: 140px;height: 20px" type="password" id="pwd" />
<br>
<br>
<span>重複密碼</span>
<input style="width: 140px;height: 20px" type="password" id="pwd2" onkeyup="checkPwd();"/>
<br>
<br>
<span>真實姓名</span>
<input style="width: 140px;height: 20px" type="text" id="realname" />
<br>
<br>
<span>聯繫方式</span>
<input style="width: 140px;height: 20px" type="text" id="tel" />
<br>
<br>
<input type="button" id="reg" value="註冊" onclick="registerUser();">
<input type="button" id="return" value="返回" onclick="back();">
</center>
</body>
</html>注：
1、js代碼用到了jQuery，所有要引入jQuery的工具類。
2、<center></center>將顯示內容放在頁面正中。
3、 表示一個空格。
解決問題一：檢測用戶名是否重複
效果圖：
方案：
1、在用戶名輸入框失去焦點是觸發 οnblur=”checkUsername();”方法。<font>用於顯示提示消息。
<input style="width: 140px;height: 20px" type="text" id="username" onblur="checkUsername();"/>
<font color="red" id="umExit"></font>2、完成checkUsername()方法
function checkUsername() {
var username=$("#username").val();//獲取輸入框內容
if(username){//用戶名輸入不爲空
//ajax、jQuery結合strut2完成後臺讀取數據庫內容，並返回數據
$.ajax({
type:"post",
url: "/topCourse/user/checkUsername.action",
dataType: "json",
data:'username='+username,//傳入的數據
success:function(data){//成功返回的數據
$.each(data,function(i,list){
if(list){//用戶存在
$("#umExit").html("用戶名已存在");
$("#reg").attr("disabled", true);//註冊按鈕失效
}else{//用戶不存在
$("#umExit").html("");
$("#reg").attr("disabled", false);//註冊按鈕可使用
}
});
},
error:function(){
alert("error!!!!!!!!!!!!!!!!!!!!");
}
});
}else{//用戶名爲空
$("#umExit").html("");
$("#reg").attr("disabled", false);
}3、完成 checkUsername.action
配置action
<action name="checkUsername" class="com.course.action.CheckUsernameAction" method="checkUsername">
<result type="json">
<param name="root">dataMap</param>
</result>
</action>action代碼：
@Controller
public class CheckUsernameAction extends ActionSupport{
private static final long serialVersionUID = 1L;
@Resource
private UserInfoService userService;//ssh架構，引入service
private Map<Integer, Object> dataMap;
public Map<Integer, Object> getDataMap() {
return dataMap;
}
public void setDataMap(Map<Integer, Object> dataMap) {
this.dataMap = dataMap;
}
public CheckUsernameAction() {
//初始化Map對象
dataMap = new HashMap<Integer, Object>();
}
public String checkUsername() {
dataMap.clear();
HttpServletRequest request = ServletActionContext.getRequest();
String username = request.getParameter("username");
UserInfo user=userService.findUserByUserame(username);//userService的方法
dataMap.put(1, user);
return SUCCESS;// 返回結果
};
}解決問題2：判讀重複密碼是否一致
效果圖：密碼不一致
密碼一致：
方案：
在重複密碼輸入框中每輸入一個值，就檢測一次與輸入的密碼是否一致：οnkeyup=”checkPwd();”
<input style="width: 140px;height: 20px" type="password" id="pwd2" οnkeyup="checkPwd();"/>function checkPwd() {
var pwd=$("#pwd").val();
var pwd2=$("#pwd2").val();
if(pwd!=pwd2){
$("#pwd2").css("border","1px solid red");//爲重複密碼框定製邊框顏色
$("#reg").attr("disabled", true);
}else{
$("#pwd2").css("border",null);//去除輸入框邊框顏色
$("#reg").attr("disabled", false);
}
}
