毕设（排课系统）笔记1---用户注册（一）

最新推荐文章于 2018-03-10 14:52:07 发布

居然有同名-李彪

最新推荐文章于 2018-03-10 14:52:07 发布

阅读量582

点赞数

分类专栏：毕设-排课系统-笔记文章标签： jsp java-web

本文链接：https://blog.csdn.net/lb850747906/article/details/45767743

版权

毕设-排课系统-笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

界面

注册界面
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>职&nbsp;&nbsp;&nbsp;称</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
方案：

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：判读重复密码是否一致

效果图：密码不一致
注册2
密码一致：
注册3
方案：
在重复密码输入框中每输入一个值，就检测一次与输入的密码是否一致：ο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);
    }
}