首页 > 技术文章 > 注册功能的实现

bad-guy 2017-07-12 17:37 原文

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

 

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

 

 HTML

头部:

尾部:

注册输入框:

<div align="center" class="login">
    <div class="easyui-panel" title="注册" style="width: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="width: 80px">
        <input type="text" id="checkCode" class="code" style="width: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语句

 

 

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

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

 

 

推荐阅读