编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

5分钟就搞定一个完善注册功能案例,你能做到吗?

wxchong 2024-07-29 08:17:07 开源技术 11 ℃ 0 评论




知识点学的再多,也不如一次实战的经验。

今天我们就来分享一个小的项目案例,相信很多小伙伴都有这样的感觉:看别人的代码行云流水,自己动手的时候无从下手。

今天我们就从零来写一个小案例吧~

首先来搭一下环境(把我们需要的工具类和第三方jar包放进去)





下面就开始动手写代码了

用户注册功能


先来创建数据库表


然后是JavaBean


接下来是逻辑代码

RegisterServlet获取前端页面传过来的数据,并把UUID封装进来




RegisterServlet 把数据传到 Service 层,Service 层调用 DAO 层,DAO 层操作数据库(完成数据的插入操作),把结果向上一层一层反馈,然后RegisterSerevle t根据返回的结果进行判断,成功就跳转到成功的页面,失败就跳转到失败的页面。



测试一下









用户注册成功之后

我们来给页面添加一个

表单验证


我们用一个 validate 插件来做表单验证


首先引入文件



编写页面代码

截图的效果不好咱们直接上页面的源码:

(友情提示:这个窗口可以左右滑动)

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<!-- 引入表单校验插件 -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<style type="text/css">
.error{
 color:red
}
</style>
<script type="text/javascript">
 $(function(){
 $("#myform").validate({
 rules:{
 "username":{
 "required":true
 },
 "password" : {
 "required" : true,
 "rangelength" : [ 6, 12 ]
 },
 "rpassword" : {
 "required" : true,
 "rangelength" : [ 6, 12 ],
 "equalTo" : "#password"
 },
 "email" : {
 "required" : true,
 "email" : true
 },
 "sex" : {
 "required" : true
 }
 },
 
 messages:{
 "username":{
 "required":"用户名不能为空!"
 },
 "password" : {
 "required" : "密码不能为空",
 "rangelength" : "密码长度6-12位"
 },
 "rpassword" : {
 "required" : "密码不能为空",
 "rangelength" : "密码长度6-12位",
 "equalTo" : "两次密码不一致"
 },
 "email" : {
 "required" : "邮箱不能为空",
 "email" : "邮箱格式不正确"
 }
 }
 });
 });
</script>
</head>
<body>
 <form id="myform" action="${pageContext.request.contextPath}/register"
 method="post">
 <table border="1px" width="600px" height="400px" align="center"
 cellpadding="0px" cellspacing="0px">
 <tr height="40px">
 <td colspan="2"><font size="4"><b>用户注册 USER
 REGISTER</b></font></td>
 </tr>
 <tr>
 <td align="center"><b>用户名</b></td>
 <td><input type="text" name="username" /></td>
 </tr>
 <tr>
 <td align="center"><b>密码</b></td>
 <td><input id="password" type="password" name="password" /></td>
 </tr>
 <tr>
 <td align="center"><b>确认密码</b></td>
 <td><input type="password" name="rpassword" /></td>
 </tr>
 <tr>
 <td align="center"><b>Email</b></td>
 <td><input type="text" name="email" /></td>
 </tr>
 <tr>
 <td align="center"><b>姓名</b></td>
 <td><input type="text" name="name" /></td>
 </tr>
 <tr>
 <td align="center"><b>性别</b></td>
 <td>
 <input type="radio" name="sex" value="male" />男 
 <input type="radio" name="sex" value="female" />女
 
 <label class="error" for="sex" style="display:none ">请选择性别!</label>
 </td>
 </tr>
 <tr>
 <td align="center"><b>出生日期</b></td>
 <td><input type="text" name="birthday" size="30px" /></td>
 </tr>
 <tr>
 <td align="center"><b>验证码</b></td>
 <td><input type="text" name="yzm" /> <img src="img/yzm.png"
 width="60" height="30" /></td>
 </tr>
 <tr>
 <td colspan="2" align="center">
 <input type="submit" value="注册" name="submit"/>
 <input type="reset" value="重置" /></td>
 </tr>
 </table>
 </form>
</body>
</html>


页面效果:





这样就完成了一个注册功能,你学会了吗?

今天就讲到这里啦,喜欢编程的小伙伴可以关注我哦!有学习方面的问题可以私信回复:学习!

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表