regiseter.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="registerServlet" method="post"> <table> <tr> <td>用户名</td> <td class="inputs"> <input name = "username" type="text" id="username"> <br> <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span> </td> </tr> <tr> <td>密码</td> <td class="inputs"> <input name = "password" type="password" id="password"> <br> <span id="password_err" class="err_msg" style="display: none">密码格式错误</span> </td> </tr> <tr> <td>手机号</td> <td class="inputs"> <input name = "tele" type="text" id="tele"> <br> <span id="tele_err" class="err_msg" style="display: none">请输入正确格式的手机号</span> </td> </tr> <tr> <td class="inputs"> <input name = "tele" type="submit" id="reg-form" value="提交"> <br> <!-- <span id="tele_err" class="err_msg" style="display: none">请输入正确格式的手机号</span> --> </td> </tr> </table> </form> <script> /* 输入框验证 */ //1.1 获取用户名的输入框 var usernameInput = document.getElementById("username"); //1.2 绑定onblur事件，失去焦点 usernameInput.onblur= usernameflag; //1.3 获取用户输入 function usernameflag(){ //去除空格 var username = usernameInput.value.trim(); //1.4判断是否合规 // var flag = username.length >= 6 && username.length<=12 ; var reg = /^\w{6,12}$/; var flag = reg.test(username); if(flag){ document.getElementById("username_err").style.display = "none"; } else{ document.getElementById("username_err").style.display = ""; } return flag; } //1.验证密码是否合规 //1.1 获取密码的输入框 var passwordInput = document.getElementById("password"); //1.2 绑定onblur事件，失去焦点 passwordInput.onblur = passwordflag; //1.3 获取用户输入 function passwordflag(){ //先去除所有空格 var password = passwordInput.value.trim(); //1.4 判断是否合规 var reg = /^\w{6,12}$/; var flag = reg.test(password); //var flag = password.length>=6&&password.length<=12 if(flag){ document.getElementById("password_err").style.display = "none"; } else{ document.getElementById("password_err").style.display = ""; } return flag; } //1.验证密码是否合规 //1.1 获取密码的输入框 var teleInput = document.getElementById("tele"); //1.2 绑定onblur事件，失去焦点 teleInput.onblur = teleflag; //1.3 获取用户输入 //先去除所有空格 function teleflag(){ var tele = teleInput.value.trim(); // var flag = tele.length==11 var reg = /^[1]\d{10}$/; var flag = reg.test(tele); //1.4 判断是否合规 if(flag){ document.getElementById("tele_err").style.display = "none"; } else{ document.getElementById("tele_err").style.display = ""; } return flag; } /* 表单验证 */ //1、获取表单 var regForm = document.getElementById("reg-form"); //2、绑定onsumit事件 regForm.onsubmit = function(){ //判断每个表单项是否符合要求 var flag = passwordflag() && usernameflag() && teleflag(); return flag; } </script> <style> span{ color:red; } </style> </body> </html>
RegiseterSevlet
package com.avb.web; import com.avb.Mapper.UserMapper; import com.avb.pojo.User; import jdk.jfr.Frequency; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; import java.io.*; 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 java.io.IOException; @WebServlet("/registerServlet") public class RegisterServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { //1、接收用户数据 String username = request.getParameter("username"); String password = request.getParameter("password"); //封装用户对象 User user = new User(); user.setUsername(username); user.setPassword(password); //2 调用mapper 根据用户查询用户对象 //2.1 获取SqlSessionFactory对象 String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream); //2.2获取SqlSession对象 SqlSession sqlSession = sqlSessionFactory.openSession(); //2.3获取Mapper UserMapper userMapper = sqlSession.getMapper(UserMapper.class); //2.4调用方法 User u = userMapper.selectByUsername(username); //3、判断用户对象释放为null if(u == null){ //用户名不存在，添加用户 userMapper.add(user); //提交事务 sqlSession.commit(); //释放资源 sqlSession.close(); }else { //用户名存在，给出提示信息 //获取字符输出流，并设置content type response.setContentType("text/html;charset=utf-8"); //PrintWriter writer = response.getWriter(); // response.setContentType("text/html"); response.getWriter().write("用户名已存在"); } } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException { this.doGet(request, response); } }