java学习笔记之注册页面项目
2016-10-12 00:00
267 查看
摘要: 前端bootstrap框架&所有填写信息规则正则表达式验证&用户名、邮箱ajax连接数据库验证&MD5密码加密&头像上传预览&ajax提交并保存至数据库（hibernate&MySQL）
最近做了一个前后端都有涉及的项目，里面有挺多新技术及常见技术，po上来以作记录。
实现功能：注册页面，填写用户名、密码、邮箱、手机号，四者的格式在前端使用正则表达式进行验证，用户名和邮箱利用ajax连接数据库验证是否可用，头像上传与预览，最后ajax整个提交（密码提交前用MD5插件加密，图片提交Base64编码）到servlet保存到数据库。
html代码：
用到的插件：
java servlet部分：
最近做了一个前后端都有涉及的项目，里面有挺多新技术及常见技术，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>密码： </h5></td>
<td><input type="password" name="psw" id="psw" class="form-control"/></td>
<td><span id="pswInfo">*</span></td>
</tr>
<tr>
<td><h5>邮箱： </h5></td>
<td><input type="email" name="email" id="email" class="form-control"/></td>
<td><span id="emailInfo">*</span></td>
</tr>
<tr>
<td><h5>电话： </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 b
3ff0
tn-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);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 网上图书商城项目学习笔记-004注册页面前后台的验证、注册功能实现、激活功能实现
- 学习笔记_Java_day14—编码实战___一个注册页面的完整流程
- Java与Flex学习笔记（12）----用CSS控制页面样式
- Java学习笔记（十二）——eclipse和SVN配置，导入SVN服务器项目
- java学习笔记6对于制作项目，数据的存储用这个ObjectOutputStream
- Java JDBC 学习笔记 - 注册驱动类的4种方式
- 【JAVA学习笔记】总结学习J2EE中一些值得研究的开源项目（转）
- Java学习笔记（2）----Web项目中解析XML文件
- 安卓学习笔记：2:用EditView创建一个简单的注册页面
- ios学习笔记：从Java转ios项目总结
- maven 学习笔记（四）-创建简单的eclipse+maven工程（简单的java项目打包为jar并混淆jar文件）
- java学习笔记---qq项目---在服务器端建立的一个Socket数组来存储已建立连接套接字
- Java与Flex学习笔记（20）---将flex页面嵌入到jsp页面中
- pyramid学习笔记3-创建注册页面
- Android（java）学习笔记94：关于广播接收者的注册和使用心得
- Java学习笔记之网络编程基础-通过URLConnection获取HTML页面
- Java 学习笔记09：Spring搭建MVC WEB项目
- java学习笔记：Eclipse打开现有项目
- java学习笔记：Eclipse打开现有项目
- 【JAVA学习笔记】学习J2EE值得研究的开源项目（转）