注册功能的实现

系统并不是显示的第一个网页是注册页面，，而是登录界面，所以注册页面需要通过登录界面进行跳转。

 

在注册页面，其头部与尾部还有背景图与登录界面一致

 

 HTML：

头部：

尾部：

注册输入框：

<div align="center" class="login">
    <div class="easyui-panel" title="注册" style="300px;" align="center">
            <table class="TBLForm" style="padding: 10px">
                <tr>
                    <td class="Rightxs">用户名</td>
                    <td><input class="easyui-textbox" id="username" name="username" onblur="checkName()" required/></td>
                </tr>
                <tr>
                    <td class="Rightxs">密码</td>
                    <td><input type="password" class="easyui-textbox" id="password" name="password" required/></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input type="password" class="easyui-textbox" id="pwd" name="pwd" onblur="checkPwd()" required/></td>
                </tr>
            </table>
        验证码：<input class="easyui-textbox" id="inputCode" style=" 80px">
        <input type="text" id="checkCode" class="code" style="50px;">
        <a href="#" onclick="lode()">看不清</a>
            <div class="datagrid-toolbar" style="height: 25px;padding: 5px;">
                <a class="easyui-linkbutton" class="btnBack" onClick="back()" data-options="iconCls:'icon-back'">返回</a>
                <span style="padding-left: 100px"/>
                <a class="easyui-linkbutton" class="btnSave" onClick="register()"
                   data-options="iconCls:'icon-save'">注册</a>
            </div>
    </div>
</div>

注意：注册页面与登录页面有很多共用的css，还有注册界面并不在公开的webapp下，而是放在了web_inf的下面了。

JavaScript：

1.验证所要注册的用户名是否存在，如果存在则不能注册

当鼠标离开用户名输入框时就会触发该验证事件，该事件为onblur

 

2.注册时验证两次输入的密码是否一致，不一致则不能注册

当鼠标离开第二个密码输入框是就触发该验证事件，该事件为onblur

 

而对于验证密码，则只需在前台Js中进行判断就行了，分别获取两个输入框中的值，将值进行比较即可

此处需要注意：easyUI中的onblur事件，是无法用jQuery来写触发，需要用原生的js来写

 

验证用户名是否存在时，需要调用后台方法，发送一个Hebe请求，与登录验证用户名后台调用同一个方法与sql语句

 

此处需要注意的是：验证码初始化的是需要在页面加载完成后开始启动。这个可以与onblur事件写在一起，写在原生的js中，自动调用，但onblur在此处并不是完全自动调用，而是当鼠标光标变化了才会触发该事件。

3.在点击注册按钮后，还需要验证验证码是否输入正确

 

当验证都没有问题则可以进行注册，其实注册的本质就是对数据库中的用户表进行添加操作

在前台js中

前台绑定用户名与密码发送一个Hebe请求给后台

 

此处需要注意的是：该后台方法不仅有注册操作，同时还要修改密码的操作，

同时需要注意，对于密码是经过一系列加密之后再添加到数据库中去的，因此当登录的时候也是要对密码进行加密后才可进行查询

注册的sql语句

 

当注册成功后一秒后会自动跳到登录界面

当不想注册的时候则会有一个返回按钮，可以返回登录界面