用到的知识点：
HTML，scc, javascripr，jsp，JDBC
Bootstrap框架
jquery-validation-1.19.0框架
index.jsp
<%--
Created by IntelliJ IDEA.
User: chang
Date: 2019/5/8
Time: 20:26
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="utf-8" %>
<%@ page contentType="text/html;charset=utf-8" %>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=utf-8");
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hi,这里是ATD</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="mystype/index.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script src="mystype/index.js"></script>
</head>
<body>
<header class="container-fluid">
<!-- top图片-->
<div class="row" class="container">
<img src="img/fl.jpg" width="100%" height="150px"/>
</div>
<div class="row" >
<p class="topfont">ATD计算机协会 </p>
</div>
<div class="row" class="container">
<div class="col-xs-12" >
<!-- 表单 -->
<form action="insert.jsp" class="form-horizontal" method="post" onSubmit="return checkForm()" >
<!-- 姓名 -->
<div class="form-group form-group-xs">
<label class="col-xs-3 control-label" for="name">姓名：</label>
<div class="col-xs-8">
<input class="form-control" type="text" name="name1" id="name" placeholder="张三" >
</div>
</div>
<!-- 学号 -->
<div class="form-group form-group-xs">
<label class="col-xs-3 control-label" for="number">学号：</label>
<div class="col-xs-8">
<input class="form-control" type="text" name="number1" id="number" placeholder="20161234">
</div>
</div>
<!-- 班级 -->
<div class="form-group form-group-xs">
<label class="col-xs-3 control-label" for="sclass">班级：</label>
<div class="col-xs-8">
<input class="form-control" type="text" name="sclass1" id="sclass" placeholder="金融1班">
</div>
</div>
<!-- 性别 -->
<div class="form-group form-group-xs">
<label class="col-xs-3 control-label" for="sex">性别：</label>
<div class="col-xs-8">
<label class="radio-inline">
<input type="radio" name="sex1" value="男" id="sex"> 渣男
</label>
<label class="radio-inline">
<input type="radio" name="sex1" value="女" > 小姐姐
</label>
</div>
</div>
<!-- 电话 -->
<div class="form-group form-group-xs">
<label class="col-xs-3 control-label" for="phone">电话：</label>
<div class="col-xs-8">
<input class="form-control" type="text" name="phone1" id="phone" placeholder="" >
</div>
</div>
<!-- QQ -->
<div class="form-group form-group-xs">
<label class="col-xs-3 control-label" for="qq">QQ：</label>
<div class="col-xs-8">
<input class="form-control" type="text" name="qq1" id="qq" placeholder="" >
</div>
</div>
<!-- 服务类型-->
<div class="form-group form-group-xs">
<label class="col-xs-3 control-label" for="fuwu">类型：</label>
<div class="col-xs-8">
<input class="form-control" type="text" name="fuwu1" id="fuwu" placeholder="例：软件安装：MySQL" >
</div>
</div>
<!--提交-->
<div class="form-group form-group-xs">
<div class="col-xs-4"></div>
<div class="col-xs-4"><button type="submit" class="btn btn-primary">提交</button></div>
<div class="col-xs-4"></div>
</div>
</form>
</div>
</div>
</header>
<div class="footer" style="text-align: center">
© ATD计算机协会 版权所有
</div>
</body>
</html>数据处理insert.jsp
<%--
Created by IntelliJ IDEA.
User: EVE
Date: 08/06/2017
Time: 16:07
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@page import="java.sql.*" %>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=utf-8");
String name = request.getParameter("name1");
String number = request.getParameter("number1");
String sclass = request.getParameter("sclass1");
String sex = request.getParameter("sex1");
String phone = request.getParameter("phone1");
String qq = request.getParameter("qq1");
String fw = request.getParameter("fuwu1");
java.util.Date date = new java.util.Date();
String datetime = new Timestamp(date.getTime()).toString();
%>
<%
String driver = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://47.106.158.252:3306/atd";
String user = "atd";//Mysql配置时的用户名
String password = "atdjsjxh";//密码
Connection conn = null;
PreparedStatement stmt = null;
int k = 0;
try {
Class.forName(driver);//加载驱动程序
conn = DriverManager.getConnection(url,user,password);
String insert_sql = "insert into rjaz values(?,?,?,?,?,?,?,?)";
stmt = conn.prepareStatement(insert_sql);
stmt.setString(1,name);
stmt.setString(2,number);
stmt.setString(3,sclass);
stmt.setString(4,sex);
stmt.setString(5,phone);
stmt.setString(6,qq);
stmt.setString(7,datetime);
stmt.setString(8,fw);
k = stmt.executeUpdate();
// 失败就转跳界面error.jsp
}catch(ClassNotFoundException e){
e.printStackTrace();
}catch (SQLException e){
e.printStackTrace();
}catch(Exception e){
e.printStackTrace();
}finally {
if(stmt != null){
try {
stmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(k==0) {
response.setHeader("Refresh", "0;url=error.jsp");
}else{
response.setHeader("Refresh", "0;url=ac.jsp");
}
}
%>
表单验证js
$(function () {
$("form").validate({
rules: {
name1: {
required: true, //该项表示该字段为必填项
maxlength: 4 //表示该字段的最大长度为4
},
number1: {
required: true,
number: true ,//表示该字段必须为数字
digits:true, //必须输入整数。
range:[20150000,20189999], // range:[5,10] 输入值必须介于 5 和 10 之间。
},
sclass1: {
required: true, //该项表示该字段为必填项
maxlength: 10 //表示该字段的最大长度为5
},
phone1: {
required: true,
isMobile : true,
},
qq1: {
required: true,
checkQQ:true,
},
fuwu1: {
required: true,
},
},
errorElement: "span", //用span包裹起来
messages: {
name1: {
required: "*必填",
maxlength: "*请正确输入姓名！"
},
number1: {
required: "*必填",
number: "*学号错误",
digits:"*学号错误",
range:"*学号错误",
},
sclass1: {
required: "*必填",
maxlength: "*输入错误"
},
phone1: {
required: "*必填",
},
qq1: {
required: "*必填",
},
fuwu1: {
required: "*必填",
},
},
//提交表单后，（第一个）未通过验证的表单获得焦点
focusInvalid:true,
});
// 自定义手机验证
$.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写手机号码");
$.validator.addMethod("checkQQ",function(value,element,params){
var checkQQ = /^[1-9][0-9]{4,19}$/;
return this.optional(element)||(checkQQ.test(value));
},"*请输入正确的QQ号码！");
});