一个简单的信息收集界面
用到的知识点：
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");
%>
Hi,这里是ATD
ATD计算机协会
数据处理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号码！");
});