Java43旅游案例：校验，提交
Posted 码农编程录
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Java43旅游案例：校验，提交相关的知识，希望对你有一定的参考价值。
文章目录
1.环境塔建：选中数据库右击运行sql文件
如上搭建完后，如下运行。
//c3p0-config.xml
<c3p0-config>
<!-- 使用默认的配置读取连接池对象 -->
<default-config>
<!-- 1. 数据库的连接参数 -->
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://localhost:3306/heima_travel89?useUnicode=true&characterEncoding=UTF8</property>
<property name="user">root</property>
<property name="password">1234</property>
</default-config>
</c3p0-config>
2.注册/提交功能：局部刷新主要应用于失败的情况，不跳转
如下唯一性校验必须后端校验，看颜色相同。
如下可快速查看源码。
2.1 前端
//register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/register.css">
<script src="js/jquery-3.3.1.js"></script> <!--导入jquery-->
<script src="js/jquery.validate.js"></script> <!--TODO: 插件在jquery之后-->
<script src="js/commons.js"></script>
<script>
$(function () { // 页面加载事件
$("#registerForm").validate({ //.validate方法基于onsubmit事件, 校验不通过: return false
rules:{
"username" : {
required:true
},
"password" : {
rangelength:[3,7] //jquery.validate.js里定义的rangelength方法
},
"telephone" : {
phoneFmt : true //commons.js里定义的phoneFmt方法
},
"email" : {
//上面3个都是前端校验，这个email是后端校验(不需要写ajax，底层就是ajax)
//参数: 默认提交当前email输入框中的value
//回调: 规定服务器只能响应 true/false
remote : "/CheckEmailServlet"
}
},
messages:{
"username" : "用户名必须输入",
"password" : "密码长度必须介于{0}到{1}之间",
"email" : "email已经被注册了,请换一个"
},
/*
* 提交处理器: 只有表单校验全都通过,才有可能执行 (基于表单提交按钮的点击事件)
* form : 表示是整个表单对象，就是上面$("#registerForm")
* */
submitHandler : function (form) {
//表单中的所有数据都序列化成 n1=v1&n2=v2... 反射拿到action属性，但找不到user.setaction方法，不会设置进去 //"action=register&username=admin&password=123&email=120%40qq.com&name=&telephone=13800138000&sex=%E7%94%B7&birthday=&check="
var param = $(form).serialize(); //结果如上行
//点提交按钮，表单会自动序列化放在地址栏中，即同步事件序列化是自动完成的。异步需要.serialize。
$.post("/RegisterServlet",param,function (result) {
console.log(result) //{msg: ..}
if(result.flag){
location.href = "/register_ok.html"
}else{
$("#msg").html(result.msg) //局部刷新，不跳转
}
},"json")
}
})
})
</script>
</head>
<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout">
<div class="rg_form clearfix">
<div class="rg_form_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_form_center">
<!--注册表单-->
<form id="registerForm">
<!--提交处理请求的标识符-->
<input type="hidden" name="action" value="register">
<table style="margin-top: 25px;">
<tr>
<td class="td_left">
<label for="username">用户名</label>
</td>
<td class="td_right">
<input type="text" id="username" name="username" placeholder="请输入账号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="password">密码</label>
</td>
<td class="td_right">
<input type="password" id="password" name="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td class="td_left">
<label for="email">Email</label>
</td>
<td class="td_right">
<input type="text" id="email" name="email" placeholder="请输入Email">
<label id="email-error" class="error" for="email"></label>
</td>
</tr>
<tr>
<td class="td_left">
<label for="name">姓名</label>
</td>
<td class="td_right">
<input type="text" id="name" name="name" placeholder="请输入真实姓名">
</td>
</tr>
<tr>
<td class="td_left">
<label for="telephone">手机号</label>
</td>
<td class="td_right">
<input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="sex">性别</label>
</td>
<td class="td_right gender">
<input type="radio" id="sex" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
</td>
</tr>
<tr>
<td class="td_left">
<label for="birthday">出生日期</label>
</td>
<td class="td_right">
<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
</td>
</tr>
<tr>
<td class="td_left">
<label for="check">验证码</label>
</td>
<td class="td_right check">
<input type="text" id="check" name="check" class="check">
<img src="checkCodeServlet" height="32px" alt="" onclick="changeCheckCode(this)">
<script type="text/javascript">
//图片点击事件
function changeCheckCode(img) {
img.src="checkCodeServlet?"+new Date().getTime();
}
</script>
</td>
</tr>
<tr>
<td class="td_left">
</td>
<td class="td_right check">
<input type="submit" class="submit" value="注册">
<span id="msg" style="color: red;"></span>
</td>
</tr>
</table>
</form>
</div>
<div class="rg_form_right">
<p>
已有账号？
<a href="#">立即登录</a>
</p>
</div>
</div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script>
</script>
</body>
</html>
如下底层就是上面的ajax。
如下改为post，到数据库查看插入的中文记录没有乱码，因为common文件夹下的CharchaterFilter.java对全站post请求拦截，响应乱码也解决了。
2.2 web
package com.heima.travel.web;
import com.heima.travel.service.UserService;
import com.heima.travel.service.impl.UserServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax案例16-validate自定义校验规则校验用户名是否存在
登录综合案例01,前端使用vue+elementui+axios 后端 springboot+mybatis-plus+swagger2