注册界面和功能
最近写了一个注册功能
首先先写jsp界面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- <link href="/CSS&JS/style_checkcode.css" rel="stylesheet" type="text/css">--> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <script type="text/javascript" src="js/logincheckcode.js"></script> <title>注册</title> <style type="text/css"> *{ margin: 0; padding: 0; } a{ text-decoration: none; outline: medium none; color: #CF0; } #wrap { height: 80%; width: 100%; background-repeat: no-repeat; background-position: center center; position: relative; } #head { height: 10%; width: 100%; background-color: #66CCCC; text-align: center; position: relative; } #foot { width: 100%; height: 10%; background-color: #CC9933; position: relative; } #wrap .logGet { height: 408px; width: 368px; position: absolute; background-color: #FFFFFF; top: 11%; left: 10%; } .inputo{ margin-top: 20px; width: 100%; height: 45px; background-color: #ee7700; border: none; color: white; font-size: 18px; } .logC a:hover { color: #63B1FF; text-shadow: 1px 1px 1px #000000; } .logGet .logD.logDtip .p1 { display: inline-block; font-size: 28px; margin-top: 10px; width: 86%; } #wrap .logGet .logD.logDtip { width: 86%; border-bottom: 1px solid #ee7700; margin-bottom: 35px; margin-top: 0px; margin-right: auto; margin-left: auto; } .logGet .lgD img { position: absolute; top: 12px; left: 8px; } .logGet .lgD input { width: 100%; height: 25px; text-indent: 2.5rem; } #wrap .logGet .lgD { width: 86%; position: relative; margin-bottom: 30px; margin-top: 10px; margin-right: auto; margin-left: auto; } #wrap .logGet .logC { width: 86%; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .title { font-family: "宋体"; color: #FFFFFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用css3的transform来实现 */ font-size: 36px; height: 40px; width: 30%; } .copyright { font-family: "宋体"; color: #FFFFFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用css3的transform来实现 */ height: 60px; width: 40%; text-align:center; } #foot .copyright .img { width: 100%; height: 24px; position: relative; } .copyright .img .icon { display: inline-block; width: 24px; height: 24px; margin-left: 22px; vertical-align: middle; /*background-image: url("");*/ background-repeat: no-repeat; vertical-align: middle; margin-right: 5px; } .copyright .img .icon1 { display: inline-block; width: 24px; height: 24px; margin-left: 22px; vertical-align: middle; /*//background-image: url();*/ background-repeat: no-repeat; vertical-align: middle; margin-right: 5px; } .copyright .img .icon2 { display: inline-block; width: 24px; height: 24px; margin-left: 22px; vertical-align: middle; /* //background-image: url();*/ background-repeat: no-repeat; vertical-align: middle; margin-right: 5px; } #foot .copyright p { height: 24px; width: 100%; } </style> <script src="js/check.js"> </script> </head> <body> <div class="header" id="head"> <div class="title">码蚁窝</div> </div> <div class="wrap" id="wrap"> <div class="logGet"> <!-- 头部提示信息 --> <div class="logD logDtip"> <p class="p1">会员注册</p> </div> <!-- 输入框 --> <form id="formLogin" action="reg.do" method="post" > <span style="color: red">${error}</span> <div class="lgD"> <!-- <img src="img/logName.png" width="20" height="20" alt=""/>--> 会员名:<input type="text" name="name" id="name" onblur="checkUser()" placeholder="由英文开头和数字组成的4-16位字符" /> <div id="user_prompt"></div> </div> <div class="lgD"> <!-- <img src="img/logPwd.png" width="20" height="20" alt=""/>--> 输入密码:<input type="password" name="pwd" id="pwd" onblur="checkPwd()" placeholder="由英文字母和数字组成的4-10位字符" /> <div id="pwd_prompt"></div> </div> <div class="lgD"> <!-- <img src="img/logPwd.png" width="20" height="20" alt=""/>--> 确认密码:<input type="password" name="repwd" id="repwd" onblur="checkRepwd()" placeholder="确认密码" /> <div id="repwd_prompt"></div> </div> <div class="lgD"> <!-- <img src="img/logPwd.png" width="20" height="20" alt=""/>--> 电话号码:<input type="text" name="mno" id="mno" onblur="checkMobile()" placeholder="输入正确电话号码" /> <div id="mobile_prompt"></div> </div> <div class="logC"> <input name="submit" type="submit" value="提交" class="inputo" id="bot" /><br/> </div> </form> </div> </div> <div class="footer" id="foot"> <div class="copyright"> <p>Copyright © 2018</p> <div class="img"> <i class="icon"></i><span></span> </div> <div class="img"> <i class="icon1"></i><span></span> </div> <div class="img"> <i class="icon2"></i><span>联系电话</span> </div> </div> </div> </body> </html>
再是后台
dao
package DAOImpl; import DAO.IMemberDAO; import Mo.Member; import Utils.JDBCUtil; import com.mysql.jdbc.JDBC4Connection; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.Statement; public class MemberDAOImpl implements IMemberDAO { //添加用户 public boolean addMember(Member member) { boolean flag=false; if(member==null) return flag; Connection conn = null; PreparedStatement ps = null; try { conn = JDBCUtil.getConn(); String sql="insert into member(mem_no,name,pwd) values(?,?,?)"; ps = conn.prepareStatement(sql); ps.setString(1,member.getMemNO()); ps.setString(2,member.getmName()); ps.setString(3,member.getmPwd()); int intflag=ps.executeUpdate(); if(intflag==1) flag=true; return flag; }catch (Exception e){ e.printStackTrace(); }finally { JDBCUtil.close(conn,ps,null); } return flag; } public boolean checkMember(String memNo, String pwd) { boolean flag=false; String sql="select mem_no,pwd FROM member where mem_no=?"; Connection conn=null; PreparedStatement ps=null; ResultSet rs=null; try{ conn= JDBCUtil.getConn(); ps=conn.prepareStatement(sql); ps.setString(1,memNo); rs=ps.executeQuery(); if(rs.next()){ String mpwd=rs.getString(2); if(mpwd.equals(pwd)) flag=true; } }catch ( Exception e){ e.printStackTrace(); }finally { JDBCUtil.close(conn,ps,rs); } return flag; } public boolean resetpwd(String memNo, String pwd) { String sql = "UPDATE member set pwd=? where mem_no=?"; Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; boolean flag=false; try { conn = JDBCUtil.getConn(); ps = conn.prepareStatement(sql); ps.setString(1, pwd); ps.setString(2, memNo); int intflag=ps.executeUpdate(); if(intflag==1) flag=true; return flag; } catch (Exception e) { e.printStackTrace(); } finally { JDBCUtil.close(conn, ps, rs); } return flag; } @Override public Member getMember(String memNo) { String sql="select * from member where mem_no=?"; Connection conn=null; PreparedStatement ps=null; ResultSet rs=null; Member member=new Member(); try { conn=JDBCUtil.getConn(); ps=conn.prepareStatement(sql); ps.setString(1,memNo); rs=ps.executeQuery(); if(rs.next()){ member.setMemId(rs.getInt(1)); member.setMemNO(rs.getString(2)); member.setmName(rs.getString(3)); member.setmGender(rs.getString(4)); member.setmAge(rs.getInt(5)); member.setmPwd(rs.getString(6)); member.setmPhoto(rs.getString(7)); member.setmIntegral(rs.getInt(8)); return member; } }catch (Exception e){ e.printStackTrace(); }finally { JDBCUtil.close(conn,ps,rs); } return null; } }
package DAO; import Mo.Member; public interface IMemberDAO { boolean addMember(Member member); boolean checkMember(String memNo, String pwd); boolean resetpwd(String memNo, String pwd); Member getMember(String memNo); }
再是servlet
package Servlet.LogRegServlet; import DAO.IMemberDAO; import DAOImpl.MemberDAOImpl; import Mo.Member; 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(name = "RegServlet",urlPatterns = "/reg.do") public class RegServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); String name = request.getParameter("name"); String pwd = request.getParameter("pwd"); String repwd = request.getParameter("repwd"); String mno = request.getParameter("mno"); //判断注册名和密码，电话号码是否为空 if (name != null && name.trim().equals("") || pwd != null && pwd.trim().equals("") || repwd != null && repwd.trim().equals("") || mno != null && mno.trim().equals("")) { request.setAttribute("regname", "会员名、密码、电话号码不能为空"); request.getRequestDispatcher("regerror.jsp").forward(request, response); return; } IMemberDAO iMemberDAO = new MemberDAOImpl(); Member member = new Member(); member.setmName(name); member.setmPwd(pwd); member.setMemNO(mno); boolean flag = false; //查找会员号码是否已存在被注册过 Member member1 = null; try { member1 = iMemberDAO.getMember(mno); } catch (Exception e) { e.printStackTrace(); } if (member1 != null) { request.setAttribute("regname", "该号码已被注册过"); request.getRequestDispatcher("regerror.jsp").forward(request, response); return; } //添加用户 try { flag = iMemberDAO.addMember(member); } catch (Exception e) { e.printStackTrace(); } if(flag){ request.setAttribute("regname",name); request.getRequestDispatcher("/regok.jsp").forward(request,response); } else{ request.setAttribute("regname",name); request.getRequestDispatcher("/regerror.jsp").forward(request,response); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }
由于要判断所以又加了js
function $(elementId){ return document.getElementById(elementId).value; } function divId(elementId){ return document.getElementById(elementId); } //验证用户名 var flag1=false; var flag2=false; var flag3=false; var flag4=false; function checkUser(){ var user=$("name"); var userId=divId("user_prompt"); userId.innerHTML=""; var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/; if(reg.test(user)==false){ userId.innerHTML="用户名不正确"; document.getElementById("bot").disabled=true; flag1=false; } else { flag1=true;} checkall(); } function checkall() { if(flag1&&flag2&&flag3&&flag4) document.getElementById("bot").disabled = false; } //确认密码是否规范 function checkPwd(){ var flagb=Boolean(true); var pwd=$("pwd"); var pwdId=divId("pwd_prompt"); pwdId.innerHTML=""; var reg=/^[a-zA-Z0-9]{4,10}$/; if(reg.test(pwd)==false){ pwdId.innerHTML="密码不能含有非法字符，长度在4-10之间"; document.getElementById("bot").disabled=true; flag2=false; } else { flag2=true;} checkall(); } //确认密码是否一致 function checkRepwd(){ var flagc=Boolean(true); var repwd=$("repwd"); var pwd=$("pwd"); var repwdId=divId("repwd_prompt"); repwdId.innerHTML=""; if(pwd!=repwd){ repwdId.innerHTML="两次输入的密码不一致"; document.getElementById("bot").disabled=true; flag3=false; } else { flag3=true;} checkall(); } //电话号码验证 function checkMobile(){ var flagd=Boolean(true); var mobile=$("mno"); var mobileId=divId("mobile_prompt"); var regMobile=/^1\d{10}$/; if(regMobile.test(mobile)==false){ mobileId.innerHTML="手机号码不正确，请重新输入"; document.getElementById("bot").disabled=true; flag4=false; } else {mobileId.innerHTML=""; flag4=true;} checkall(); }
