文档章节

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

marina李梦晓
 marina李梦晓
发布于 2016/10/12 12:07
字数 1221
阅读 10
收藏 0

        最近做了一个前后端都有涉及的项目,里面有挺多新技术及常见技术,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);
	}

}

 

© 著作权归作者所有

marina李梦晓
粉丝 12
博文 36
码字总数 22337
作品 0
昆明
程序员
私信 提问
需要整合自己的java项目实现第三方登陆

需要实现这样的第三方。相当于论坛的登陆页面出现一个自己的第三方登陆按钮。然后点击跳转到自己的java项目的登陆验证页面。自己java项目验证用户and密码成功后。重定向到论坛的首页。如果没...

小帅帅丶
2014/06/23
1K
1
Java读取Evernote笔记 – 使用DeveloperToken

在学习的时候,经常使用Evernote记录一下笔记或收藏一些有用的文章。如果通过Java读取Evernote文章哪?官方给处理授权接口。 首先我们需要在Evernote的sandbox环境注册一个账户,https://san...

YOTOO
2014/07/05
1K
1
一份关于 Java、Kotlin 与 Android 的学习笔记

JavaKotlinAndroidLearn 这是一份关于 Java 、Kotlin 、Android 的学习笔记,既包含对基础知识点的介绍,也包含对一些重要知识点的源码解析,笔记的大纲如下所示: Java 重拾Java(0)-基础知...

叶应是叶
2018/08/08
0
0
【Java学习路线】新手该如何一步步的学习 Java

新手该如何一步步的学习 Java? 如果真的想学Java,最好要循序渐进,有章有法的学习它! 今天小慕就不说一些学习方法和技巧了,直接来谈每个阶段要学习的内容。 首先,给大家分享一张以 企业...

Eddie_yang
2018/11/15
2.1K
0
全新互联网Java后端开发技术思维导图

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/t4i2b10X4c22nF6A/article/details/82714797 图文里的技术如何学习,有没有免费资料? 对Java的技术,架构技术...

JAVA高级架构v
2018/09/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
7
0
高防CDN的出现是为了解决网站的哪些问题?

高防CDN是为了更好的服务网络而出现的,是通过高防DNS来实现的。高防CDN是通过智能化的系统判断来路,再反馈给用户,可以减轻用户使用过程的复杂程度。通过智能DNS解析,能让网站访问者连接到...

云漫网络Ruan
今天
14
0
OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
2.9K
24
SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
46
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部