本文介绍了一个用户注册系统的实现过程，包括注册页面的设计、前后端交互逻辑、表单验证及数据库操作等内容。通过JSP页面、JavaScript验证、Ajax实时检查与Servlet处理等技术实现了完整的用户注册流程。
1.注册效果图
2.register.jsp源码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>register</title>
<!--引入bootstrap.css-->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/bootstrap/css/bootstrap.css"/>
<!--引入myscss.css-->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/myscss.css"/>
<!--验证表单-->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/bootstrapvalidate/css/bootstrapValidator.css" />
<!--引入jquery.js-->
<script type="text/javascript" src="<%=request.getContextPath()%>/bootstrap/js/jquery-3.1.1.js"></script>
<!--bootstrap.js-->
<script type="text/javascript" src="<%=request.getContextPath()%>/bootstrap/js/bootstrap.js"></script>
<!--表单验证的相关组件-->
<script type="text/javascript" src="<%=request.getContextPath()%>/bootstrapvalidate/js/bootstrapValidator.js" ></script>
<!--register.js-->
<script type="text/javascript" src="<%=request.getContextPath()%>/foreground/login/register.js"></script>
</head>
<body>
<!--标题-->
<!-- <div id="navhead"></div> -->
<%@include file="/foreground/common/head.jsp"%>
<!--注册-->
<div class="container">
<div class="row">
<form class="form-horizontal" action="${pageContext.request.contextPath}/RegisterServlet" method="post">
<h2 class="text-center">新会员注册</h2>
<div class="form-group margintop">
<label class="col-md-4 control-label">会员邮箱</label>
<div class="col-md-4">
<input type="text" id="email" name="email" class="form-control" placeholder="请输入邮箱">
</div>
<!-- <div class="col-md-4">
<span id="email_msg" class="text-danger lineheight">请输入有效的邮箱地址</span>
</div> -->
</div>
<div class="form-group">
<label class="col-md-4 control-label">会员名</label>
<div class="col-md-4">
<input type="text" id="username" name="name" class="form-control" placeholder="请输入会员名">
</div>
<!-- <div class="col-md-4">
<span id="username_msg" class="text-danger lineheight">会员名必须大于6位</span>
</div> -->
</div>
<div class="form-group">
<label class="col-md-4 control-label">密码</label>
<div class="col-md-4">
<input type="password" id="password" name="pass" class="form-control" placeholder="请输入密码">
</div>
<!-- <div class="col-md-4">
<span id="password_msg" class="text-danger lineheight">密码必须大于6位</span>
</div> -->
</div>
<div class="form-group">
<label class="col-md-4 control-label">重复密码</label>
<div class="col-md-4">
<input type="password" id="repassword" name="repass" class="form-control" placeholder="请再次输入密码">
</div>
<!-- <div class="col-md-4">
<span id="repassword_msg" class="text-danger lineheight">两次密码必须一致</span>
</div> -->
</div>
<div class="form-group">
<label class="col-md-4 control-label">性别</label>
<div class="col-md-4">
<label class="radio-inline"><input type="radio" name="gender" value="male">男</label>
<label class="radio-inline"><input type="radio" name="gender" value="female">女</label>
</div>
<div class="col-md-4"></div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">联系电话</label>
<div class="col-md-4">
<input type="text" class="form-control" id="phone" name="phone" placeholder="请输入电话">
</div>
<div class="col-md-4"></div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">个人介绍</label>
<div class="col-md-4">
<textarea class="form-control" id="introduce" name="introduce"></textarea>
</div>
<div class="col-md-4"></div>
</div>
<hr style="border:1px dashed gray;">
<div class="col-md-12 text-center">
<input type="submit" value="同意并提交" class="btn btn-success" onclick="return checkForm()">
</div>
</form>
</div>
</div>
<!--错误-->
<c:if test="${!empty errorMsg}">
<!-- 可关闭的警告框 -->
<div class="text-center alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<strong>错误！</strong>${errorMsg }
</div>
</c:if>
<!--如果用户已经登录，则点击我的账户和新用户注册，跳转页面时钟是用户主页面-->
<c:if test="${!empty user}">
<jsp:forward page="/foreground/user/user.jsp"></jsp:forward>
</c:if>
</body>
<!-- <script type="text/javascript">
//是否为空
function ifnull(txt){
if(txt.length==0){
return true;
}
var $reg=/\s+/;
return $reg.test(txt);
}
//在id为email的元素失去焦点时进行邮箱的验证
$("#email").blur(function(){
if(ifnull($(this).val())){
$("#email_msg").html("邮箱不能为空");
}else{
var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
if(!$reg.test($("#email").val())){
$("#email_msg").html("邮箱格式错误！");
}else{
$("#email_msg").attr("class","text-success glyphicon glyphicon-ok");
$("#email_msg").html("");
}
}
});
//在id为username的元素失去焦点时进行用户名的验证
$("#username").blur(function(){
if(ifnull($(this).val())){
$("#username_msg").html("用户名不能为空");
}else{
var $reg=/^\w{6,}$/;
if(!$reg.test($("#username").val())){
$("#username_msg").html("用户名至少要6位哦");
}else{
$("#username_msg").attr("class","text-success glyphicon glyphicon-ok");
$("#username_msg").html("");
}
}
});
//在id为password的元素失去焦点时进行密码的验证
$("#password").blur(function(){
if(ifnull($(this).val())){
$("#password_msg").html("用户名不能为空");
}else{
var $reg=/^\w{6,}$/;
if(!$reg.test($("#password").val())){
$("#password_msg").html("密码至少要6位哦");
}else{
$("#password_msg").attr("class","text-success glyphicon glyphicon-ok");
$("#password_msg").html("");
}
}
});
//在id为repassword的元素失去焦点时进行密码的验证
$("#repassword").blur(function(){
if(ifnull($(this).val())){
$("#repassword_msg").html("请确认密码");
}else{
if($("#password").val()!=$("#repassword").val()){
$("#repassword_msg").html("两次密码不一致");
}else{
$("#repassword_msg").attr("class","text-success glyphicon glyphicon-ok");
$("#repassword_msg").html("");
}
}
});
//验证表单
function checkForm(){
//验证邮箱
if(ifnull($("#email").val())){
$("#email_msg").html("邮箱不能为空！");
return false;
}else{
var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
if(!$reg.test($("#email").val())){
$("#email_msg").html("邮箱格式错误！");
return false;
}
}
//验证用户名
if(ifnull($("#username").val())){
$("#username_msg").html("用户名不能为空！");
return false;
}else{
var $reg=/^\w{6,}$/;
if(!$reg.test($("#username").val())){
$("#username_msg").html("用户名至少6位");
return false;
}
}
//验证密码
if(ifnull($("#password").val())){
$("#password_msg").html("密码不能为空");
return false;
}else{
var $reg=/^\w{6,}$/;
if(!$reg.test($("#password").val())){
$("#password_msg").html("密码至少6位");
return false;
}
}
//确认密码是否为空
if(ifnull($("#repassword").val())){
$("#repassword_msg").html("请确认密码");
return false;
}
//验证两次密码是否一致
if($("#password").val()!=$("#repassword").val()){
$("#repassword_msg").html("两次密码不一致");
return false;
}
return true;
}
</script> -->
</html>
3.register.js源码
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons:{
valid:'glyphicon glyphicon-ok',
invalid:'glyphicon glyphicon-remove',
validating:'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
regexp: {
regexp: /^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/,
message: '邮箱地址格式有误'
},
threshold: 5,//有5个字符才发送Ajax请求
remote: {//发送Ajax请求到
type: 'post',
url: '/mybookstore/AjaxCheckEmailServlet',
message: '此邮箱已被注册',
/*delay: 1000 //每1秒钟发送一次Ajax请求
*/ }
}
},
name: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '用户名长度必须在6到18位之间'
},
regexp: {
regexp: /^\w+$/,
message: '用户名只能包含大写、小写、数字和下划线'
},
threshold: 6,//有6个字符才发送Ajax请求
remote: {
type: 'post',
url: '/mybookstore/AjaxCheckNameServlet',
message: '此用户名已被注册',
}
}
},
pass: {
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '密码长度必须在6到18位之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用户名只能包含大写、小写、数字和下划线'
}
}
},
repass: {
validators: {
notEmpty: {
message: '密码不能为空'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用户名只能包含大写、小写、数字和下划线'
},
identical: {
field: 'pass',
message: '*两次输入密码不一致'
}
}
},
phone :{
validators: {
notEmpty: {
message: '电话不能为空'
},
regexp: {
regexp: /^1[0-9]{10}$/,
message: '电话格式不正确'
}
}
}
}
}).on("success.form.bv",function(e){
alert("注册成功！");
});
});4.AjaxCheckEmailServlet.java,实现验证邮箱是否存在
package com.chinasoft.servlet;
import java.io.IOException;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.Map;
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 com.chinasoft.dao.impl.ImplUserDao;
import net.sf.json.JSONObject;
/**
* @author jf
* 功能：处理ajax的email实时验证功能，返回一个json数据
*/
@WebServlet("/AjaxCheckEmailServlet")
public class AjaxCheckEmailServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxCheckEmailServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码格式
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//邮箱
String email = request.getParameter("email");
//创建一个对象
ImplUserDao userEmail = new ImplUserDao();
try {
//查询邮箱是否在数据库存在
Boolean isFind = userEmail.findUserByEmail(email);
Map<String,Boolean> map = new HashMap<>();
if(isFind){
map.put("valid", false);
String result = JSONObject.fromObject(map).toString();
response.getWriter().write(result);
}else{
map.put("valid", true);
String result = JSONObject.fromObject(map).toString();
response.getWriter().write(result);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
5.AjaxCheckNameServlet.java,实现验证用户名是否存在
package com.chinasoft.servlet;
import java.io.IOException;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.Map;
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 com.chinasoft.dao.impl.ImplUserDao;
import net.sf.json.JSONObject;
/**
* @author jf
* 功能：处理ajax的name实时验证功能，返回一个json数据
*/
@WebServlet("/AjaxCheckNameServlet")
public class AjaxCheckNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxCheckNameServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码格式
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//用户名
String name = request.getParameter("name");
//创建一个对象
ImplUserDao userName = new ImplUserDao();
try {
//查询用户名是否在数据库存在
Boolean isFind = userName.findUserByName(name);
Map<String,Boolean> map = new HashMap<>();
if(isFind){
map.put("valid", false);
//将map中的数据转成JOSN格式的数据
String result = JSONObject.fromObject(map).toString();
//返回JSON格式的数据
response.getWriter().write(result);
}else{
map.put("valid", true);
String result = JSONObject.fromObject(map).toString();
response.getWriter().write(result);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}6.RegisterServlet.java,注册功能实现
package com.chinasoft.servlet;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.sql.SQLException;
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 org.apache.commons.beanutils.BeanUtils;
import com.chinasoft.dao.impl.ImplUserDao;
import com.chinasoft.entity.User;
/**
* @author jf
* 功能：实现用户登录功能
* 1.获取用户输入的各项注册数据，用beanutils进行快速赋值
* 2.将数据插入数据库
* 3.成功的话页面跳转到登陆页面，失败的话报错并且重新跳转到注册页面
*/
@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
User user = new User();
//1.获取请求体
try {
BeanUtils.populate(user, request.getParameterMap());
} catch (IllegalAccessException e1) {
e1.printStackTrace();
} catch (InvocationTargetException e1) {
e1.printStackTrace();
}
//2.插入数据库
ImplUserDao ImpluserDao = new ImplUserDao();
try {
ImpluserDao.addUser(user);
//3.注册成功，跳转登录页面
request.getRequestDispatcher("/foreground/login/login.jsp").forward(request, response);
} catch (SQLException e) {
//注册失败
request.setAttribute("errorMag", e.getMessage());
request.getRequestDispatcher("/foreground/login/register.jsp");
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
扫一扫
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
