前端
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>注册</title><link rel="stylesheet" type="text/css" href="css/common.css"><link rel="stylesheet" href="css/register.css"><!--导入jquery--><script src="js/jquery-3.3.1.js"></script><script>/*表单校验：1.用户名：单词字符，长度8到20位2.密码：单词字符，长度8到20位3.email：邮件格式4.姓名：非空5.手机号：手机号格式6.出生日期：非空7.验证码：非空*///校验用户名//单词字符，长度8到20位function checkUsername() {//1.获取用户名值var username = $("#username").val();//2.定义正则var reg_username = /^\w{8,20}$/;//3.判断，给出提示信息var flag = reg_username.test(username);if(flag){//用户名合法$("#username").css("border","");}else{//用户名非法,加一个红色边框$("#username").css("border","1px solid red");}return flag;}//校验密码function checkPassword() {//1.获取密码值var password = $("#password").val();//2.定义正则var reg_password = /^\w{8,20}$/;//3.判断，给出提示信息var flag = reg_password.test(password);if(flag){//密码合法$("#password").css("border","");}else{//密码非法,加一个红色边框$("#password").css("border","1px solid red");}return flag;}//校验邮箱function checkEmail(){//1.获取邮箱var email = $("#email").val();//2.定义正则 itcast@163.comvar reg_email = /^\w+@\w+\.\w+$/;//3.判断var flag = reg_email.test(email);if(flag){$("#email").css("border","");}else{$("#email").css("border","1px solid red");}return flag;}$(function () {//当表单提交时，调用所有的校验方法$("#registerForm").submit(function(){//1.发送数据到服务器if(checkUsername() && checkPassword() && checkEmail()){//校验通过,发送ajax请求，提交表单的数据 username=zhangsan&password=123$.post("user/regist",$(this).serialize(),function(data){//处理服务器响应的数据 data {flag:true,errorMsg:"注册失败"}if(data.flag){//注册成功，跳转成功页面location.href="register_ok.html";}else{//注册失败,给errorMsg添加提示信息$("#errorMsg").html(data.errorMsg);}});}//2.不让页面跳转return false;//如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交});//当某一个组件失去焦点是，调用对应的校验方法$("#username").blur(checkUsername);$("#password").blur(checkPassword);$("#email").blur(checkEmail);});</script></head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout"><div class="rg_form clearfix"><div class="rg_form_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="rg_form_center"><div id="errorMsg" style="color:red;text-align: center"></div><!--注册表单--><form id="registerForm" action="user"><!--提交处理请求的标识符--><input type="hidden" name="action" value="register"><table style="margin-top: 25px;"><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" id="username" name="username" placeholder="请输入账号"></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="password" id="password" name="password" placeholder="请输入密码"></td></tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="text" id="email" name="email" placeholder="请输入Email"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" id="name" name="name" placeholder="请输入真实姓名"></td></tr><tr><td class="td_left"><label for="telephone">手机号</label></td><td class="td_right"><input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号"></td></tr><tr><td class="td_left"><label for="sex">性别</label></td><td class="td_right gender"><input type="radio" id="sex" name="sex" value="男" checked> 男<input type="radio" name="sex" value="女"> 女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="date" id="birthday" name="birthday" placeholder="年/月/日"></td></tr><tr><td class="td_left"><label for="check">验证码</label></td><td class="td_right check"><input type="text" id="check" name="check" class="check"><img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)"><script type="text/javascript">//图片点击事件function changeCheckCode(img) {img.src="checkCode?"+new Date().getTime();}</script></td></tr><tr><td class="td_left"></td><td class="td_right check"><input type="submit" class="submit" value="注册"><span id="msg" style="color: red;"></span></td></tr></table></form></div><div class="rg_form_right"><p>已有账号？<a href="#">立即登录</a></p></div></div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script></body>
</html>
后端
package com.lianxi.pojo.servlet;import com.fasterxml.jackson.databind.ObjectMapper; //需要在pom里导入jackson-databind！！！
import org.apache.commons.beanutils.BeanUtils; //需要导入commons-beanutils！！！import com.lianxi.pojo.domain.ResultInfo;
import com.lianxi.pojo.domain.User;
import com.lianxi.pojo.service.UserService;
import com.lianxi.pojo.service.impl.UserServiceImpl;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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;@WebServlet("/registUserServlet")
public class RegistUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//验证校验String check = request.getParameter("check");//从sesion中获取验证码HttpSession session = request.getSession();String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");session.removeAttribute("CHECKCODE_SERVER");//为了保证验证码只能使用一次//比较if(checkcode_server == null || !checkcode_server.equalsIgnoreCase(check)){//验证码错误ResultInfo info = new ResultInfo();//注册失败info.setFlag(false);info.setErrorMsg("验证码错误");//将info对象序列化为jsonObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(info);response.setContentType("application/json;charset=utf-8");response.getWriter().write(json);return;}//1.获取数据Map<String, String[]> map = request.getParameterMap();//2.封装对象User user = new User();try {BeanUtils.populate(user,map);} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}//3.调用service完成注册UserService service = new UserServiceImpl();boolean flag = service.regist(user);ResultInfo info = new ResultInfo();//4.响应结果if(flag){//注册成功info.setFlag(true);}else{//注册失败info.setFlag(false);info.setErrorMsg("注册失败!");}//将info对象序列化为jsonObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(info);//将json数据写回客户端//设置content-typeresponse.setContentType("application/json;charset=utf-8");response.getWriter().write(json);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}
