注册功能的实现
Posted bad--guy
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了注册功能的实现相关的知识,希望对你有一定的参考价值。
系统并不是显示的第一个网页是注册页面,,而是登录界面,所以注册页面需要通过登录界面进行跳转。
在注册页面,其头部与尾部还有背景图与登录界面一致
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的下面了。
1.验证所要注册的用户名是否存在,如果存在则不能注册
当鼠标离开用户名输入框时就会触发该验证事件,该事件为onblur
2.注册时验证两次输入的密码是否一致,不一致则不能注册
当鼠标离开第二个密码输入框是就触发该验证事件,该事件为onblur
而对于验证密码,则只需在前台Js中进行判断就行了,分别获取两个输入框中的值,将值进行比较即可
此处需要注意:easyUI中的onblur事件,是无法用jQuery来写触发,需要用原生的js来写
验证用户名是否存在时,需要调用后台方法,发送一个Hebe请求,与登录验证用户名后台调用同一个方法与sql语句
此处需要注意的是:验证码初始化的是需要在页面加载完成后开始启动。这个可以与onblur事件写在一起,写在原生的js中,自动调用,但onblur在此处并不是完全自动调用,而是当鼠标光标变化了才会触发该事件。
3.在点击注册按钮后,还需要验证验证码是否输入正确
当验证都没有问题则可以进行注册,其实注册的本质就是对数据库中的用户表进行添加操作
在前台js中
前台绑定用户名与密码发送一个Hebe请求给后台
此处需要注意的是:该后台方法不仅有注册操作,同时还要修改密码的操作,
同时需要注意,对于密码是经过一系列加密之后再添加到数据库中去的,因此当登录的时候也是要对密码进行加密后才可进行查询
注册的sql语句
当注册成功后一秒后会自动跳到登录界面
当不想注册的时候则会有一个返回按钮,可以返回登录界面
以上是关于注册功能的实现的主要内容,如果未能解决你的问题,请参考以下文章