本文主要是介绍jsp+servlet做的报名表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
页面如下：
1.数据库设计
这里直接使用Navicat数据库可视化工具来见表，表名为member
有如下字段：
name
class
phone
remarks
2.login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>2018年技术交流协会网上报名</title>
<style>input{display:inline-block;height:30px;}
</style>
</head>
<body>
<br>
<!-- form里面的action属性是用来把表单的数据提交这个属性所指定的地方,也就是提交到User这个HttpServlet中(需要在wweb.xml中配置相关User信息) -->
<form id="form1" name="form1" method="post" action="User" class="targetCopy"> <table border="0" align="center" style="border-collapse:separate; border-spacing:0px 10px;"> <caption style="margin-bottom:20px">2018年技术交流协会网上报名</caption> <tr><td width="100">姓名：</td> <td width="220"><input name = "Name" id="uname" type="text" maxlength="10" placeholder="请输入用户名"/></td> </tr> <tr><td >班级：</td> <td width="195"><input name="Classes" id="uclasses" type="text" maxlength="10" placeholder="请输入班级"/></td> </tr> <tr><td >手机：</td> <td width="195"><input name="Phone" id="uphone" type="text" maxlength="11" placeholder="请输入手机号"/></td> </tr> <tr><td >QQ：</td> <td width="195"><input name="QQ" id="uqq" type="text" maxlength="11" placeholder="请输入QQ"/></td></tr> <tr><td>验证码：</td><td><img src="" id="code" onclick="change(this)" alt="图片不存在" height="30px"/> <a href="#" onclick="javascript:show();return false;">看不清,换一张!</a></td></tr><tr><td>输入验证码：</td><td width="195"><input type="text" name="captcha" maxlength="11" id="inputVerifyCode" placeholder="请输入验证码"/></td></tr> <tr><td >备注：</td> <td width="195"><textarea name="Remarks" id="remarks" rows="3" cols="20" style="padding:0px" placeholder="请在此处介绍自己..."></textarea></td> </tr> <tr align="center" valign="center" cellpadding="5px"> <td></td><td style="margin-top:20px;"><div id="btps"><input onclick="SubmitForm()" type="button" value="提交" /> <input type="reset" name="Submit" value="重置" /> <a href=""></a></div></td> </tr> </table>
</form> <script type="text/javascript">var code ; //在全局 定义验证码 var form1 = document.getElementById("form1");var name = document.getElementById("uname");var classes = document.getElementById("uclasses");var phone = document.getElementById("uphone");var qq = document.getElementById("uqq");var inputVerifyCode = document.getElementById("inputVerifyCode");var remarks = document.getElementById("remarks");//这里我选择在js中生成一个验证码，然后在传给服务器,也就是ValidateCodeServlet，专门用来生成动态验证码function createCode(){ code = ""; var codeLength = 4;//验证码的长度 //所有候选组成验证码的字符，可以用中文 var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C', 'D','E','F','G','H','I','J','K','L','M','N','O','P', 'Q','R','S','T','U','V','W','X','Y','Z','a','b','c', 'd','e','f','g','h','i','j','k','l','m','n','o','p', 'q','r','s','t','u','v','w','x','y','z'); for(var i=0;i<codeLength;i++){ var charIndex = Math.floor(Math.random()*60); code +=selectChar[charIndex]; } return code; } function checkName(){var tname = name.value;console.log(name);console.log(tname);if (tname.length < 4) {name.value="";name.placeholder = "用户名不能为空且不能少于4位";name.style.border="2px solid red";name.onkeydown = function(){name.style.border="2px solid #ccc";}return false;}elsereturn true;}function checkClasses(){var tclasses = classes.value;if (tclasses.length == 0) {classes.value="";classes.placeholder = "班级不能为空";classes.style.border="2px solid red";classes.onkeydown = function(){classes.style.border="2px solid #ccc";}return false;}elsereturn true;}function checkRemarks(){var tremarks = remarks.value;if (tremarks.length <= 10) {remarks.value="";remarks.placeholder = "备注不能少于10个字";remarks.style.border="2px solid red";remarks.onkeydown = function(){remarks.style.border="2px solid #ccc";}return false;}elsereturn true;}function validate (){ var inputCode = inputVerifyCode.value;if(inputCode.length <=0){ inputVerifyCode.value="";inputVerifyCode.placeholder = "请输入验证码";inputVerifyCode.style.border="2px solid red";inputVerifyCode.onkeydown = function(){inputVerifyCode.style.border="2px solid #ccc";}return false; } else if(inputCode != code){ inputVerifyCode.value="";inputVerifyCode.placeholder = "验证码错误";inputVerifyCode.style.border="2px solid red";inputVerifyCode.onkeydown = function(){inputVerifyCode.style.border="2px solid #ccc";} show();//刷新验证码 return false; }else{ //alert("^-^ OK"); return true; } } function show(){ //显示验证码 document.getElementById("code").src="validatecode?code="+createCode(); } window.onload = function() { //document.onload=show(); show();//页面加载时加载验证码 //这时无论在ie还是在firefox中，js没有加载完，页面的东西是不会被执行的； } //检测手机号function checkPhone(){var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;if (!myreg.test(phone.value)) {phone.value="";phone.placeholder = "手机号格式错误";phone.style.border="2px solid red";phone.onkeydown = function(){phone.style.border="2px solid #ccc";}return false;}elsereturn true;}function checkQQ(){var bValidate = RegExp(/^[1-9][0-9]{4,9}$/).test(qq.value);if (bValidate){ return true; }else{ qq.value="";qq.placeholder = "QQ号格式错误";qq.style.border="2px solid red";qq.onkeydown = function(){qq.style.border="2px solid #ccc";}return false;}}//检查验证码function checkVerifyCode(){//console.log(inputVerifyCode.value);if(inputVerifyCode.equal(verifyCode))return true;elsereturn false;}function SubmitForm() {if( checkClasses() && checkRemarks() && checkPhone() && checkQQ() && validate()){form1.submit();}else{}}</script>
</body>
</html>
3.动态验证码生成（ValidateCodeServlet.java）
package com.liqiang.Servlet;import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class ValidateCodeServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stubdoPost(req, resp); }@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stub/** 由于服务器端的Servlet生成图像首先放在缓存里，为使客户端得到最新的图像，避免客户端通过缓存得到图片* 所以这里这里通过以下三条语句来设置特定HTTP响应头来禁止客户端缓存页面*/resp.setHeader("Prama","No-cache");resp.setHeader("Cache-Control", "No-cache");resp.setDateHeader("Expires", 0);resp.setContentType("image/jpeg"); //设置相应正文的MIME类型图片int width = 60, height = 20;/*创建一个位于缓冲区的图像，宽度60，高度20*/BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();Random random = new Random();g.setColor(getRandomColor(200, 250));g.fillRect(0, 0, width, height);g.setFont(new Font("Times New Roman", Font.PLAIN, 18)); // 字体格式g.setColor(getRandomColor(160,200));for (int i=0; i<130; i++){int x=random.nextInt(width);int y=random.nextInt(height);int x1=random.nextInt(12);int y1=random.nextInt(12);g.drawLine(x,y,x+x1,y+y1); //在图像的坐标(x,y)和坐标（x+x1, y+y1）之间画干扰线}//获取login.jsp中生成的验证码，然后将之加工成图片形式String code = req.getParameter("code"); String strCode = code; for (int i=0; i<strCode.length(); i++){String strNumber = strCode.substring(i, i + 1); //设置字体颜色g.setColor(new Color(15+random.nextInt(120), 15+random.nextInt(120), 15+random.nextInt(120)));g.drawString(strNumber, 13*i+6, 16);}g.dispose(); //释放图像的上下文以及使用的所有系统资源ImageIO.write(image,"JPEG",resp.getOutputStream()); //输出JPEG格式的图像resp.getOutputStream().flush(); //刷新输出流resp.getOutputStream().close(); }public Color getRandomColor(int fc,int bc) {Random random = new Random();Color randomColor = null;if(fc > 255) fc = 255;if(bc > 255) bc = 255;int r = fc+random.nextInt(bc-fc);int g = fc+random.nextInt(bc-fc);int b = fc+random.nextInt(bc-fc);randomColor = new Color(r,g,b);return randomColor;}}
4.JavaBean技术(Member类的目的把注册信息保存到这里，方便数据库插入)
package com.liqiang.Report;public class Member {public String name; public String classes; public String phone; public String qq; public String remarks;public String getName() {return name;}public void setName(String name) {this.name = name;}public String getClasses() {return classes;}public void setClasses(String classes) {this.classes = classes;}public String getPhone() {return phone;}public void setPhone(String phone) {this.phone = phone;}public String getQq() {return qq;}public void setQq(String qq) {this.qq = qq;}public String getRemarks() {return remarks;}public void setRemarks(String remarks) {this.remarks = remarks;}
}
5.用于数据插入数据库
package com.liqiang.Dao;
import java.sql.*;import com.liqiang.Report.Member;
import com.liqiang.util.DBUtil;public class memberDao {private String sql=""; private int intResult=-1; public memberDao(){ } public void memberInsert(Member mbr) { // TODO Auto-generated method stub DBUtil db = new DBUtil();Connection con = db.getCon();Statement stmt = db.getStmed();sql = "insert into member (name,class,phone,qq,remarks) "+ "values('"+mbr.getName()+"','"+mbr.getClasses()+"','"+mbr.getPhone()+"','"+mbr.getQq()+"','"+mbr.getRemarks()+"')";db.dosql(sql);}}
6.表单提交后所访问的页面(User.java)
package com.liqiang.Servlet;import java.io.IOException;import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.liqiang.Dao.memberDao;
import com.liqiang.Report.Member;public class User extends HttpServlet {private Member mbr = new Member(); public void destroy() { super.destroy(); // Just puts "destroy" string in log } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); }public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); mbr.setName(request.getParameter("Name").trim()); mbr.setClasses(request.getParameter("Classes").trim());mbr.setPhone(request.getParameter("Phone").trim()); mbr.setQq(request.getParameter("QQ").trim()); mbr.setRemarks(request.getParameter("Remarks").trim()); memberDao md = new memberDao(); md.memberInsert(mbr);response.sendRedirect(request.getContextPath()+"/success.jsp");//响应输出流//request.getRequestDispatcher("index.jsp").forward(request, response); }public void init() throws ServletException {// Put your code here}}
7.DBUtil.java（工具类）
package com.liqiang.util;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;import com.mysql.jdbc.Statement;public class DBUtil {// 获取数据库连接private static Connection conn;private static Statement stmt;private static String url = "jdbc:mysql://127.0.0.1:3306/student?characterEncoding=utf8&useSSL=false&serverTimezone=Hongkong";private static String root = "root";private static String pass = "asdasd456789";public static Connection getConnection(){try{Class.forName("com.mysql.jdbc.Driver");conn = DriverManager.getConnection(url,root,pass);//大家分享代码的时候也不要暴露自己的数据库密码，这样是非常不安全的}catch(ClassNotFoundException e){e.printStackTrace();System.out.println("数据库驱动加载出错");}catch(SQLException e){e.printStackTrace();System.out.println("数据库出错");}return conn;}public static Statement getStmted() {conn = getConnection();try {stmt = (Statement) conn.createStatement();}catch(Exception e) {e.printStackTrace();}return stmt;}//关闭相关通道public static void close(){try{if(conn != null)conn.close();if(stmt != null)stmt.close();}catch(SQLException e){e.printStackTrace();System.out.println("数据关闭出错");}}public void dosql(String sql) {stmt = getStmted();try {stmt.executeUpdate(sql);}catch(Exception e) {e.printStackTrace();}}
}
8.注册成功（success.jsp）
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ page import="java.net.URLEncoder" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body><b>恭喜你报名成功</b>
</body>
</html>9.web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"><display-name>Demo1</display-name><welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</welcome-file></welcome-file-list><servlet><servlet-name>ValidateCodeServlet</servlet-name><servlet-class>com.liqiang.servlet.ValidateCodeServlet</servlet-class></servlet><servlet-mapping><servlet-name>ValidateCodeServlet</servlet-name><url-pattern>/validatecode</url-pattern></servlet-mapping><servlet><servlet-name>User</servlet-name><servlet-class>com.liqiang.servlet.User</servlet-class></servlet><servlet-mapping><servlet-name>User</servlet-name><url-pattern>/User</url-pattern></servlet-mapping>
</web-app>后期将对这个demo进行二次修改，添加管理员权限，主要可以导出excel和修改学生报名信息
这篇关于jsp+servlet做的报名表的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
