java学习笔记之注册页面项目

最新推荐文章于 2022-07-29 15:59:32 发布

choumoyin5005

最新推荐文章于 2022-07-29 15:59:32 发布

阅读量142

点赞数

文章标签： java 数据库前端 ViewUI

原文链接：https://my.oschina.net/marina1216/blog/757387

版权

最近做了一个前后端都有涉及的项目，里面有挺多新技术及常见技术，po上来以作记录。

实现功能：注册页面，填写用户名、密码、邮箱、手机号，四者的格式在前端使用正则表达式进行验证，用户名和邮箱利用ajax连接数据库验证是否可用，头像上传与预览，最后ajax整个提交（密码提交前用MD5插件加密，图片提交Base64编码）到servlet保存到数据库。

html代码：

用到的插件：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript" src="base64.js"></script>
</head>
<body>
	<form role="form">
		<div id="content" class="form-group" style="width: 500px;margin-left: 10px;">			
			<h1>注册页面</h1>
			<table class="table">
				<tbody>
					<tr>
					<td width=20%><h5>用户名：</h5></td>//因为table中的部分内容是动态内容，为了保证每次改变的时候td宽度不随之改变，因此在第一行的每个td中都要设置好宽度的百分比
					<td width=40%><input type="text" name="name" id="name" class="form-control"/></td>
					<td width=40%><span id="nameInfo">*</span></td>
					</tr>
					<tr>
					<td><h5>密码：&nbsp;&nbsp;&nbsp;</h5></td>
					<td><input type="password" name="psw" id="psw" class="form-control"/></td>
					<td><span id="pswInfo">*</span></td>
					</tr>
					<tr>
					<td><h5>邮箱：&nbsp;&nbsp;&nbsp;</h5></td>
					<td><input type="email" name="email" id="email" class="form-control"/></td>
					<td><span id="emailInfo">*</span></td>
					</tr>
					<tr>
					<td><h5>电话：&nbsp;&nbsp;&nbsp;</h5></td>
					<td><input type="text" name="phone" id="phone" class="form-control"/></td>
					<td><span id="phoneInfo"></span></td>
					</tr>
					<tr>
					<td><h5>上传头像：</h5></td>//每个浏览器对file类型的input的表现形式都不一样，为了确保形式统一性，一般都将input设置为隐藏，再设置label标签for input的id，就可以实现样式统一
					<td><label for="file" class="btn btn-primary">选择上传文件</label><input type="file" name="file" id="file" style="display: none;"/></td>
					<td><span id="phoneInfo"></span></td>
					</tr>
					<tr>
						<td colspan="3" style="text-align: center;"><img id="previewPhoto" src="images/default.jpg" width="121"></td>
					</tr>
					<tr>
						<td colspan="3">
                            //很多浏览器对于button的默认type都是submit，但是我们使用的是ajax提交，所以一定要将type改成button
							<button type="button" class="btn btn-success" style="margin-left: 100px;" onclick="doSubmit()">注册</button>
							<button type="reset" class="btn btn-primary" style="margin-left: 70px;">重置</button>							
						</td>
					</tr>
				</tbody>	
			</table>			
		</div>
	</form>	
	<script type="text/javascript">	
		$("#file").change(
			function  (a) {
			var file=this.files[0];//取出上传文件
			var reader=new FileReader();	
			reader.readAsDataURL(file);//将文件的地址读出来
			reader.onload=function  (e) {//reader的加载事件
				$("#previewPhoto").attr("src",this.result);//加载后的result就是上传的图片的Base64编码
			}
		});
	
		$("#name").blur(
			function () {
			var name=$("#name").val();
			var reg= /^[a-zA-Z0-9]\w{2,}$/;
			var xhr=new XMLHttpRequest();
			if(name ==''||name==null||name==undefined){
				$("#nameInfo").css("fontSize","15px");
				$("#nameInfo").text("用户名不能为空！");
			}
			else{
				if(reg.test(name)){
					$("#nameInfo").css("fontSize","15px");
					$("#nameInfo").text("√:验证通过");
					xhr.open("GET","RegisterVerifyName?name="+name,true);
					xhr.send();
					nameOK=true;
				}
				else{
					$("#nameInfo").css("fontSize","15px");
					$("#nameInfo").text("×该用户名不合法，只能为字母、数字和下划线，并至少为三个字符！");
				}
			}			
			
			xhr.onreadystatechange=function () {
				$("#nameInfo").text(xhr.responseText);
			}
		});
		
		$("#psw").blur(
			function  () {
				var psw=$("#psw").val();
				var reg=/^[a-zA-Z0-9\W]{8,}$/;
				if(psw ==''||psw==null||psw==undefined){
					$("#pswInfo").css("fontSize","15px");
					$("#pswInfo").text("×:密码不能为空！");
				}
				else{
					if(reg.test(psw)){
						$("#pswInfo").css("fontSize","15px");
						$("#pswInfo").text("√:验证通过");
						pswOK=true;
						
					}
					else{
						$("#pswInfo").css("fontSize","15px");
						$("#pswInfo").text("×:密码太弱，请不少于8个字符！");
					}
				}
				
				
		});
		
		$("#email").blur(
			function  () {
				var email=$("#email").val();
				var reg=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
				var xhr=new XMLHttpRequest();
				if(email ==''||email==null||email==undefined){
					$("#emailInfo").css("fontSize","15px");
					$("#emailInfo").text("×:邮箱不能为空！");
				}
				else{
					if(reg.test(email)){
						$("#emailInfo").css("fontSize","15px");
						$("#emailInfo").text("√:验证通过");
						xhr.open("GET","RegisterVerifyEmail?email="+email,true);
						xhr.send();
						emailOK=true;
					}
					else{
						$("#emailInfo").css("fontSize","15px");
						$("#emailInfo").text("×:邮箱格式不正确！");
					}
				}
				xhr.onreadystatechange=function  () {
					$("#emailInfo").text(xhr.responseText);
				}
				
		});
		
		$("#phone").blur(
			function  () {
				var phone=$("#phone").val();
				var reg=/^[1][0-9]{10}$/;
				if(phone ==''||phone==null||phone==undefined){
					$("#phoneInfo").css("fontSize","15px");
					$("#phoneInfo").text("×:号码不能为空！");
				}
				else{
					if(reg.test(phone)){
						$("#phoneInfo").css("fontSize","15px");
						$("#phoneInfo").text("√:验证通过");
					}
					else{
						$("#phoneInfo").css("fontSize","15px");
						$("#phoneInfo").text("×:电话格式不正确！");
					}
				}
		});

		function doSubmit () {
			if(nameOK&&pswOK&&emailOK){
				$("#psw").val(MD5($("#psw").val()));
				$.ajax({
					type:"post",
					url:"RegisterCheck",
					data:{
						"name":$("#name").val(),
						"psw":$("#psw").val(),
						"email":$("#email").val(),
						"phone":$("#phone").val(),
						"imgStr":$("#previewPhoto").attr("src")
					},
					async:true,
					success:function  (data) {//data是成功响应后传回的数据，即servlet中out.write()里的数据
						$("#content").html("<h1>"+data+"</h1>");
					}
				});
			}
			else{
				$("#submitInfo").css("fontSize","15px");
				$("#submitInfo").text("信息不完整！");
			}
		}
		
	</script>
</body>
</html>

java servlet部分：

package control;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.dao.UserDao;
import model.entity.User;

/**
 * Servlet implementation class Register
 */
@WebServlet("/RegisterCheck")
public class Register extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Register() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		PrintWriter out=response.getWriter();
		UserDao ud=new UserDao();
		String name=request.getParameter("name");	
		String psw=request.getParameter("psw");
		String email=request.getParameter("email");
		String phone=request.getParameter("phone");
		String imgStr=request.getParameter("imgStr");
		
		User u=new User();
		u.setName(name);
		u.setPassword(psw);
		u.setEmail(email);
		u.setPhone(phone);
		u.setImgStr(imgStr);
		ud.save(u);
		out.write("注册成功！");
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

转载于:https://my.oschina.net/marina1216/blog/757387