界面
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" onkeyup="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);
}
}