之前已经能实现添加雇员的功能了。但是我们还需要进行表单校验。
校验过程概述：
校验流程：
1、首先是前端校验，用户名和 邮箱 正则表达式规则
2、发送 ajax ，校验是否存在 用户名。
====
一、这个时候，出现一种情况：用户名 前端校验成功 满足大于6位，
但是数据库有重复。表单样式，显示错误了，但是还是能够保存。
提交保存按钮，提交前，必须要知道 当前 用户名是否 重名这个标记，
所以，就在每次检测用户名是否重名时，将结果作为保存按钮的属性。
二、如果第一次保存成功，第二次再打开时，信息没有变化，ajax没有去调用是否重复用户名，导致保存的按钮仍是激活的，这样仍能保存。所以，解决办法就是，每次打开清空表单内容。当然，第二次打开表单的时候，也残留了之前的样式，所以也需要清空表单样式。
====
三、 情况是，输入 aaa 发送ajax查询，数据库没有重复，就显示用户名可用。但是一提交，显示 用户名要大于6位 ，用户名提示信息由绿色变成了红色，导致用户无法保存。所以 ajax 请求不仅要查用户名重复，也要查名字 大于6位。 于是在ajax请求查用户名重复的服务器方法中，又添加了校验 用户名格式 的方法。
四、上面这样做还会出现问题，如果输入aaabbb，告诉用户，用户名已存在，但用户仍点击提交按钮，还是会将表单红色提示的信息，替换成了绿色信息，虽然无法提交，因为保存按钮被冻结了。这种现象是因为，表单提交时，先前端进行了格式化校验，然后查看保存按钮的激活状态，最后发送保存请求。
其中，前端格式化校验，会发现用户名满足大于等于6位的要求，然后将表单信息由原来的用户名已存在红色信息改为了绿色，而格式化校验后，发现保存按钮被禁用，因为用户名重复。原因就在于，前端格式化校验不能同时进行用户名重复，导致红色错误提示被替换成了绿色信息。
解决办法心得：提交表单的时候，先校验 用户名是否是重复 的那个标记值，如果是false就直接返回不提交，这样就跳过了后面在对表单格式进行校验，这样做省的将错误信息：用户名已存在 ，通过表单格式校验 改成 用户名可用的状态。
五、 如果输入用户名张三，发现用户名不可用，就算现在保存按钮被冻结，但也可以禁用或修改js代码，或者修改表单属性，重新激活保存按钮，成功的将表单发送给服务器， 显然这样只能 防君子不防小人。
所以在错误信息发送到服务器时，我们仍要对错误信息进行校验，这就做后端校验。这样做用于校验表单格式和用户名重复两个功能。校验完后，用户要么保存要么不保存，总之都会发送信息给浏览器，告知用户是否保存成功。
校验心得总结：
在关键数据上，前端校验后，还需要后端校验，
jquery前端校验，ajax用户名重复校验，重要数据（后端校验(JSR303)，唯一约束）；前端校验 + 后端校验+ 数据库约束
jsr303校验规则，就是
1、添加jar包
2、变量中 添加定义注解，配置返回值
3、方法中形参 设置 注解和返回值
js表单重置学习：
//如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
function reset_form(ele){
//重置表单内容
$(ele)[0].reset();
//清空表单样式
$(ele).find(“*”).removeClass(“hass-erroe has-success”);
$(eye).find(“.help-block”).text(“”);
}
一、前端校验[前端发起的校验]
大白话：
Bootstrap框架中， 表单对象的校验，首先只要给form对象 添加 was–validated 属性就行。此时表单会根据input的type属性，自动校验，比如是否为空，又比如type=email，那么会检查 输入信息是否是email类型。这些是bootstrap，自己添加的。
一般我们不用，我们自己用代码校验并判断 input 是否合法，并给input标签 添加 is-invalid 或 is-valid 属性，来表示是否合法。
表单中的：valid–feedback 和 invalid–feedback 是用来 展示校验结果信息的。
1、js校验表单格式：
遇到前端错误时，可以用 chrome 调试，记得打开开发者模式！
下面是插入 保存时添加校验 方法 ，
但是调用时 validate_add_form 方法忘记加括号了！要修改啊，坑爹。
//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
if(!validate_add_form){
//校验有误，失败
return false;
}
//1.将模态框框中的数据提交给服务器进行保存
//2.方式ajax请求，保存员工
//alert($("#empAddModal form").serialize());
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//经过测试，服务器返回的是 json形式的 Msg对象， 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
console.log(result);
//alert(result.msg);
//1、员工保存成功，需要关闭模态框。
$("#empAddModal").modal("hide");
//2、来到最后一页，显示刚才的数据；发送ajax请求，显示最后一页数据即可(用总记录数请求，保证是请求足够大，mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验，只会返回最后一页数据)
to_page(totalRecords);
}
});
});
validate_add_form()方法实现：其中下面代码有错误：
var regemail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if(!regEmail.test(emial)){...}
纠正：【regEmail 不是 regemail，email 不是 emial】
//2、校验邮箱信息 var email = $("email_add_input").val(); 忘记添加#号了
正确的做法是：$("#email_add_input") 坑爹 ！！！
邮箱的正则表达式也写错了，纠正一下：
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
//校验 添加员工信息 表单 合法性
function validate_add_form(){
//拿到要校验的数据，使用正则表达式
//1、校验用户信息
//获取表单值
var empName = $("#empName_add_input").val();
//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
//校验正则表达式
if(!regName.test(empName) ){
// 弹窗校验 太丑
//alert("用户名可以是2-5位中文或者是6-16位英文或数字的组合");
// $("#empName_add_input").addClass("is-invalid");
show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
return false;
}else{
show_validate_msg("#empName_add_input","success","");
}
//2、校验邮箱信息
var email = $("email_add_input").val();
var regemail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(emial)){
// 弹窗校验 太丑
//alert("邮箱格式不正确");
//$("#email_add_input").addClass("is-invalid");
show_validate_msg("#email_add_input","error","邮箱格式不正确");
return false;
}else{
show_validate_msg("#email_add_input","success","");
}
return true;
}
//显示校验结果的提示信息
function show_validate_msg(ele,status,msg){
//清除当前元素的校验状态
$(ele).removeClass("is-invalid is-valid");
$(ele).next("div").removeClass("valid-feedback invalid-feedback").text("");
if("success"==status){
$(ele).addClass("is-valid");
$(ele).next("div").addClass("valid-feedback").text(msg);
}else if("error" == status){
$(ele).addClass("is-invalid");
$(ele).next("div").addClass("invalid-feedback").text(msg);
}
}
2、js校验用户名是否重复
(1)添加表单变化监听事件：
index.jsp
//校验添加的用户名 是否可用。需要在 保存按钮提交前进行 判断，自定义属性留个记号，让保存按钮可用来判断 后端校验情况。
$("#empName_add_input").change(function(){
//发送 ajax 请求，校验 用户名 是否可用。
var empName = this.value;
$.ajax({
url:"${APP_PATH}/checkUser",
type:"POST",
data:"empName="+empName,
success:function(result){
if(result.code==100){
show_validate_msg("#empName_add_input","success","用户名可用");
$("#emp_add_save_btn").attr("ajax-check-user","success");
}else{
show_validate_msg("#empName_add_input","error",result.extend.user_msg)
$("#emp_add_save_btn").attr("ajax-check-user","error");
}
}
});
});
EmployeeController.java
/**
* 检查用户名是否可用
*
* @param empName
* @return
*/
@ResponseBody
@RequestMapping("/checkUser")
public Msg checkUser(String empName) {
boolean b = employeeService.checkUser(empName);
if (b)
return Msg.success().add("user_msg","用户名可用");
else
return Msg.fail().add("user_msg", "用户名不可用");
}
EmployeeService.java
/**
* 检验用户名是否可用
*
* @param empName
* @return true:代表当前姓名可用 false:代表不可用
*/
public boolean checkUser(String empName) {
EmployeeExample example = new EmployeeExample();
Criteria criteria = example.createCriteria();
criteria.andEmpNameEqualTo(empName);
// 按照条件，统计符号条件的记录数
long count = employeeMapper.countByExample(example);
return count==0;
}
(2)添加模态框的重复性标记
//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
//alert("校验测试");
//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
if($(this).attr("ajax-check-user")=="error"){
return false;
}
.....
}
3、重新打开模态框bug
需要：
function reset_form(ele){
//重置表单内容
$(ele)[0].reset();
//清空表单样式
$(ele).find(“*”).removeClass(“hass-erroe has-success”);
$(eye).find(“.help-block”).text(“”);
}
4、在校验用户名重复中添加用户名格式校验
在EmployeeController.java中：
/**
* 检查用户名是否可用
*
* @param empName
* @return
*/
@ResponseBody
@RequestMapping("/checkUser")
public Msg checkUser(String empName) {
// 先判断用户名是否是合法的表达式;
String regx = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})";
if (!empName.matches(regx)) {
return Msg.fail().add("user_msg", "用户名必须是6-16位数字和字母的组合或者2-5位中文");
}
boolean b = employeeService.checkUser(empName);
if (b)
return Msg.success().add("user_msg","用户名可用");
else
return Msg.fail().add("user_msg", "用户名不可用");
}
5、前端校验顺序调整
避免表单样式由红色错误信息变成绿色
//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
//alert("校验测试");
//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
if($(this).attr("ajax-check-user")=="error"){
return false;
}
//2、前端校验表单格式
if(!validate_add_form()){
//校验有误，失败
return false;
}
//发送ajax请求，如果前端校验被修改了，比如禁用js，修改js代码等
//这时候需要后端校验，并将结果返回给浏览器
.....
});
二、对浏览器表单数据进行后端校验
1、导入jsr303校验规则的jar包，即在pom.xml中添加
<!--JSR303数据校验支持；tomcat7及以上的服务器， tomcat7以下的服务器：用的是旧的el.jar包，el表达式是旧标准的 ，需要额外给服务器的lib包中替换新的标准的el.jar包 -->
<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-validator -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.4.1.Final</version>
</dependency>
2、对校验对象，添加注解
在Employee.java中：
package com.ssm.crud.bean;
import javax.validation.constraints.Pattern;
import org.hibernate.validator.constraints.Email;
public class Employee {
private Integer empId;
/***
//jsr303校验规则
//@Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})",message="")
* 这里的 \u3333 [3333是为了不报错才添加的]
* java表达式是认识的 但是严格点还是要 \\u
***/
@Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5})",message="用户名必须是6-16位数字和字母的组合或者2-5位中文")
private String empName;
private String gender;
//jsr303校验规则
//@Email 直接用这个注解也够了
//@Pattern(regexp="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$",message="")
//在正则表达式中 \ 就是转义的，然后再java中 \ 也是转义的，所以需要java中的 \\ 来表示正则表达式中的一个 \
@Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",message="邮箱格式不正确")
private String email;
private Integer dId;
public Integer getEmpId() {
return empId;
}
public void setEmpId(Integer empId) {
this.empId = empId;
}
public String getEmpName() {
return empName;
}
public void setEmpName(String empName) {
this.empName = empName == null ? null : empName.trim();
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender == null ? null : gender.trim();
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email == null ? null : email.trim();
}
public Integer getdId() {
return dId;
}
public void setdId(Integer dId) {
this.dId = dId;
}
//添加 Department 属性，用于关联查询
private Department department;
public Department getDepartment() {
return department;
}
public void setDepartment(Department department) {
this.department = department;
}
//生成自定义构造器 ，顺便 附带 无参构造器
public Employee(Integer empId, String empName, String gender, String email, Integer dId) {
super();
this.empId = empId;
this.empName = empName;
this.gender = gender;
this.email = email;
this.dId = dId;
}
public Employee() {
super();
}
@Override
public String toString() {
return "Employee [empId=" + empId + ", empName=" + empName + ", gender=" + gender + ", email=" + email
+ ", dId=" + dId + ", department=" + department + "]";
}
}
（3）方法形参中启用
在EmployeeController.java中：
/**
* 员工保存
* 1、支持JSR303校验
* 2、导入Hibernate-Validator
* 3、在bean的属性中 添加校验注解
* 4、在调用方法参数中，写上 @Valid 启用校验功能，BindingResult 设置校验结果返回
* @return
*/
@ResponseBody
@RequestMapping(value = "/emp", method = RequestMethod.POST)
public Msg saveEmpWithJson(@Valid Employee employee ,BindingResult result) {
if(result.hasErrors())
{
//校验失败，应该返回失败，在模态框中显示校验失败的错误信息
Map<String, Object> map = new HashMap<>();
List<FieldError> errors = result.getFieldErrors();
for (FieldError fieldError : errors) {
System.out.println("错误的字段名："+fieldError.getField());
System.out.println("错误信息："+fieldError.getDefaultMessage());
map.put(fieldError.getField(), fieldError.getDefaultMessage());
}
return Msg.fail().add("errorFields", map);
}
else {
System.out.println(employee);
employeeService.saveEmp(employee);
return Msg.success();
}
}
三、前端页面代码
index.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">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:8080)；需要加上项目名
http://localhost:8080/crud
-->
<script type="text/javascript"
src="${APP_PATH }/static/jquery-1.12.4/jquery.js"></script>
<link
href="${APP_PATH }/static/bootstrap-4.1.3-dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="${APP_PATH }/static/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script>
<link
href="${APP_PATH }/static/font-awesome-3.2.1/css/font-awesome.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 标题 -->
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
<!-- 按钮 -->
<div class="row">
<div class="ml-auto mr-5">
<button class="btn btn-primary btn-sm" id="emp_add_modal_btn">
<i class="icon-file-alt icon-large"></i> 新增
</button>
<button class="btn btn-danger btn-sm">
<i class="icon-trash icon-large"></i> 删除
</button>
</div>
</div>
<div class="text-center">
<h5>测试列表</h5>
</div>
<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">员工添加</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label class="col-sm-3 col-form-label">empName</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="empName_add_input" name="empName" placeholder="empName">
<div class="invalid-feedback"> 用户名错误，请输入6-16个英文或2-5汉字。 </div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="email_add_input" name="email" placeholder="[email protected]">
<div class="invalid-feedback"> 邮箱输入错误。</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">gender</label>
<div class="col-sm-9">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="gender1_add_input" checked value="M">
<label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="gender2_add_input" value="F">
<label class="form-check-label" >女</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">departName</label>
<div class="col-sm-6">
<!-- 部门提交部门id即可 -->
<select class="custom-select my-1 mr-sm-2" name="dId" id="dept_add_select">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_add_save_btn">保存</button>
</div>
</div>
</div>
</div>
<!-- 显示表格数据 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- 显示分页信息 -->
<div class="row">
<div class="col-md-6" id="page_info_area"></div>
<div class="col-md-6" id="page_nav_area"></div>
</div>
</div>
<script type="text/javascript">
//定义 全局变量，总记录数
var totalRecords ;
//1、页面加载完成以后，直接去发送ajax请求,要到分页数据
$(function(){
//去首页
to_page(1);
});
function to_page(pn){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function(result){
//console.log(result);
//1、解析并显示员工数据
build_emps_table(result);
//2、解析并显示分页信息
build_page_info(result);
//3、解析显示分页条数据
build_page_nav(result);
}
});
}
/* $(function() {
$.ajax({
url : "${APP_PATH}/emps",
data : "pn=1",
type : "GET",
success : function(result) {
//console.log(result)
//1、解析并显示员工信息
build_emps_table(result);
//2、解析并显示分页信息
build_page_info(result);
//3、解析显示分页条
build_page_nav(result);
}
});
}); */
function build_emps_table(result) {
//清空table表格,如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
$("#emps_table tbody").empty();
var emps = result.extend.pageInfo.list;
$.each(emps, function(index, item) {
//alert(item.empName);
//构建单元格
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>").append(item.department.deptName);
/**
<button class="btn btn-primary btn-sm">
<i class="icon-edit icon-large"></i> 编辑
</button>
<button class="btn btn-danger btn-sm">
<i class="icon-trash icon-large"></i> 删除
</button>
**/
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit-btn")
.append($("<i></i>").addClass("icon-edit icon-large")).append(" 编辑");
//为编辑按钮添加一个自定义的属性，来表示当前员工id
editBtn.attr("edit-id",item.empId);
var deleteBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete-btn")
.append($("<i></i>").addClass("icon-trash icon-large")).append(" 删除");
//为删除按钮添加一个自定义的属性来表示当前删除的员工id
deleteBtn.attr("delete-id",item.empId);
var btnTd = $("<td></td>").append(editBtn).append(" ").append(deleteBtn);
//append方法执行完成以后还是返回原来的元素
$("<tr></tr>")
.append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(deptNameTd)
//.append(editBtn)
//.append(deleteBtn)
.append(btnTd)
.appendTo("#emps_table tbody");
});
}
//解析显示分页信息
function build_page_info(result){
//请空之前的分页显示信息，如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
$("#page_info_area").empty();
$("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+
"页，总共"+result.extend.pageInfo.pages+"页,总"+result.extend.pageInfo.total+"记录")
totalRecords = result.extend.pageInfo.total;
}
//解析显示分页条
function build_page_nav(result) {
//page_nav_area
//请空之前的分页条，如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
//构建元素
var firstPageLi = $("<li></li>").addClass("page-item").append( $("<a></a>").addClass("page-link").attr("href","#").append("首页") );
var prePageLi = $("<li></li>").addClass("page-item").append( $("<a></a>").addClass("page-link").append("«") );
var lastPageLi = $("<li></li>").addClass("page-item").append( $("<a></a>").addClass("page-link").attr("href","#").append("末页") );
var nextPageLi = $("<li></li>").addClass("page-item").append( $("<a></a>").addClass("page-link").append("»") );
//添加首页和前一页 的提示
ul.append(firstPageLi).append(prePageLi);
if(result.extend.pageInfo.hasPreviousPage == false){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}else{
//为元素添加点击翻页的事件
firstPageLi.click(function(){
to_page(1);
});
prePageLi.click(function(){
to_page(result.extend.pageInfo.pageNum -1);
});
}
//遍历页码号1,2，3等，给ul中添加页码提示
$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
var numLi = $("<li></li>").addClass("page-item").append( $("<a></a>").addClass("page-link").append(item) );
if(result.extend.pageInfo.pageNum == item){
numLi.addClass("active");
}
numLi.click(function(){
to_page(item);
});
ul.append(numLi);
})
//添加下一页和末页 的提示
ul.append(nextPageLi).append(lastPageLi);
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}else{
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum +1);
});
lastPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
});
}
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//情况表单信息 方法
function reset_form(ele){
//重置表单内容
$(ele)[0].reset();
//清空表单样式
$(ele).find("*").removeClass("is-invalid is-valid");
$(ele).find(".valid-feedback .invalid-feedback").text("");
}
//添加模态框的事件，一开始忘记添加#号了，emp_add_modal_btn
$("#emp_add_modal_btn").click(function(){
//清除表单数据（表单完整重置（表单的数据，表单的样式））
reset_form("#empAddModal form");
//发送ajax请求，弹出部门信息，显示在下拉列表中
getDepts();
//弹出模态框
$("#empAddModal").modal({
backdrop:"static"
});
});
function getDepts(){
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
console.log(result);
//显示部门信息，在下拉列表中
// $("#dept_add_select") 换一种找法
//$("#empAddModal select")
//清除之前留下的 option 标签
$("#empAddModal select").empty();
$.each(result.extend.depts,function(){
var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
optionEle.appendTo("#empAddModal select");
});
}
});
}
//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
//alert("校验测试");
//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
if($(this).attr("ajax-check-user")=="error"){
return false;
}
//2、前端校验表单格式
if(!validate_add_form()){
//校验有误，失败
return false;
}
//1.将模态框框中的数据提交给服务器进行保存
//2.方式ajax请求，保存员工
//alert($("#empAddModal form").serialize());
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//经过测试，服务器返回的是 json形式的 Msg对象， 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
console.log(result);
//alert(result.msg);
if(result.code==100)
{
//1、员工保存成功，需要关闭模态框。
$("#empAddModal").modal("hide");
//2、来到最后一页，显示刚才的数据；发送ajax请求，显示最后一页数据即可(用总记录数请求，保证是请求足够大，mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验，只会返回最后一页数据)
to_page(totalRecords);
}else{
//显示失败信息
//console.log(result);
//有哪个字段的错误信息，就显示哪个字段
//alert(result.extend.errorFileds.email);
//alert(result.extend.errorFileds.empName);
if(undefined!=result.extend.errorFileds.email){
//显示邮箱错误信息
show_validate_msg("#email_add_input","error",result.extend.errorFileds.email);
}
if(undefined!=result.extend.errorFileds.empName){
//显示员工名字错误信息
show_validate_msg("#emPName_add_input","error",result.extend.errorFileds.empName);
}
}
}
});
});
//校验 添加员工信息 表单 合法性
function validate_add_form(){
//拿到要校验的数据，使用正则表达式
//1、校验用户信息
//获取表单值
var empName = $("#empName_add_input").val();
//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
//一开始正则表达式写错了，导致两个中文的名字无法保存 ，关键就是大括号的位置啊
//var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]){2,5}/;
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
//校验正则表达式
if(!regName.test(empName) ){
// 弹窗校验 太丑
//alert("用户名可以是2-5位中文或者是6-16位英文或数字的组合");
// $("#empName_add_input").addClass("is-invalid");
show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
return false;
}else{
show_validate_msg("#empName_add_input","success","");
}
//2、校验邮箱信息
var email = $("#email_add_input").val();
// 正则表达式 看花眼了啊 少了 一个 [
//var regEmail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){
// 弹窗校验 太丑
//alert("邮箱格式不正确");
//$("#email_add_input").addClass("is-invalid");
show_validate_msg("#email_add_input","error","邮箱格式不正确");
return false;
}else{
show_validate_msg("#email_add_input","success","");
}
return true;
}
//显示校验结果的提示信息
function show_validate_msg(ele,status,msg){
//清除当前元素的校验状态
$(ele).removeClass("is-invalid is-valid");
$(ele).next("div").removeClass("valid-feedback invalid-feedback").text("");
if("success"==status){
$(ele).addClass("is-valid");
$(ele).next("div").addClass("valid-feedback").text(msg);
}else if("error" == status){
$(ele).addClass("is-invalid");
$(ele).next("div").addClass("invalid-feedback").text(msg);
}
}
//校验添加的用户名 是否可用。需要在 保存按钮提交前进行 判断，自定义属性留个记号，让保存按钮可用来判断 后端校验情况。
$("#empName_add_input").change(function(){
//发送 ajax 请求，校验 用户名 是否可用。
var empName = this.value;
$.ajax({
url:"${APP_PATH}/checkUser",
type:"POST",
data:"empName="+empName,
success:function(result){
if(result.code==100){
show_validate_msg("#empName_add_input","success","用户名可用");
$("#emp_add_save_btn").attr("ajax-check-user","success");
}else{
show_validate_msg("#empName_add_input","error",result.extend.user_msg)
$("#emp_add_save_btn").attr("ajax-check-user","error");
}
}
});
});
</script>
</body>
</html>
三、校验模块改进
（1）基本想法：
1、先前端校验-再后端校验
2、每个校验模块中都有校验优先顺序。
【根据具体情况判断，比如校验单个表单元素时，先本地后服务器，减少服务器压力，提交表单时，先判断之前服务器传回来的校验结果，然后再进行前端验证。】
2、表单变化时，应该用前端校验，表单提交时用后端校验。
（2）具体方法：
1、抽取了单个表单对象的校验方法，定义了全局变量【校验正则表达式，校验展示信息】
2、对每个表单对象，一旦变化就进行单独校验。
3、提交表单时，先判断之前服务器传回来的校验结果，然后再进行前端校验。
4、表单提交后，在进行服务端校验。
（3）修改后的网页代码：
<%@ 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">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:8080)；需要加上项目名
http://localhost:8080/crud
-->
<script type="text/javascript"
src="${APP_PATH }/static/jquery-1.12.4/jquery.js"></script>
<link
href="${APP_PATH }/static/bootstrap-4.1.3-dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="${APP_PATH }/static/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script>
<link
href="${APP_PATH }/static/font-awesome-3.2.1/css/font-awesome.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 标题 -->
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
<!-- 按钮 -->
<div class="row">
<div class="ml-auto mr-5">
<button class="btn btn-primary btn-sm" id="emp_add_modal_btn">
<i class="icon-file-alt icon-large"></i> 新增
</button>
<button class="btn btn-danger btn-sm">
<i class="icon-trash icon-large"></i> 删除
</button>
</div>
</div>
<div class="text-center">
<h5>测试列表</h5>
</div>
<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">员工添加</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label class="col-sm-3 col-form-label">empName</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="empName_add_input" name="empName" placeholder="empName">
<div class="invalid-feedback"> 用户名错误，请输入6-16个英文或2-5汉字。 </div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="email_add_input" name="email" placeholder="[email protected]">
<div class="invalid-feedback"> 邮箱输入错误。</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">gender</label>
<div class="col-sm-9">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="gender1_add_input" checked value="M">
<label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="gender2_add_input" value="F">
<label class="form-check-label" >女</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">departName</label>
<div class="col-sm-6">
<!-- 部门提交部门id即可 -->
<select class="custom-select my-1 mr-sm-2" name="dId" id="dept_add_select">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_add_save_btn">保存</button>
</div>
</div>
</div>
</div>
<!-- 显示表格数据 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- 显示分页信息 -->
<div class="row">
<div class="col-md-6" id="page_info_area"></div>
<div class="col-md-6" id="page_nav_area"></div>
</div>
</div>
<script type="text/javascript">
//定义 全局变量，总记录数
var g_totalRecords ;
var g_empName_reg = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
var g_empName_valid ="用户名可用";
var g_empName_invalid_format = "用户名可以是2-5位中文或者6-16位英文和数字的组合";
var g_empName_invalid_exist = "用户名已存在";
var g_email_reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
var g_email_valid = "";
var g_email_invalid_format="邮箱格式不正确";
//获取表单值
//var empName = $("#empName_add_input").val();
//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
//一开始正则表达式写错了，导致两个中文的名字无法保存 ，关键就是大括号的位置啊
//var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]){2,5}/;
//var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
//show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
//校验邮箱信息
//var email = $("#email_add_input").val();
// 正则表达式 看花眼了啊 少了 一个 [
//var regEmail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
// var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
// show_validate_msg("#email_add_input","error","邮箱格式不正确");
//表单内容和样式重置方法
function reset_form(ele){
//重置表单内容
$(ele)[0].reset();
//清空表单样式
$(ele).find("*").removeClass("is-invalid is-valid");
$(ele).find(".valid-feedback .invalid-feedback").text("");
}
//校验表单元素 参数：元素 和 正则表达式 ,提示信息
function validate_form_ele(ele,reg,tip_success,tip_error){
//拿到要校验的数据，使用正则表达式
var ele_value = $(ele).val();
if( reg.test(ele_value)){
show_validate_msg(ele,"success",tip_success);
return true;
}else{
show_validate_msg(ele,"error",tip_error);
return false;
}
}
//显示校验结果的提示信息
function show_validate_msg(ele,status,msg){
//清除当前元素的校验状态
$(ele).removeClass("is-invalid is-valid");
$(ele).next("div").removeClass("valid-feedback invalid-feedback").text("");
if("success"==status){
$(ele).addClass("is-valid");
$(ele).next("div").addClass("valid-feedback").text(msg);
}else if("error" == status){
$(ele).addClass("is-invalid");
$(ele).next("div").addClass("invalid-feedback").text(msg);
}
}
//1、页面加载完成以后，直接去发送ajax请求,要到分页数据
$(function(){
//去首页
to_page(1);
});
/********************公共方法上面*********************/
function to_page(pn){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function(result){
//console.log(result);
//1、解析并显示员工数据
build_emps_table(result);
//2、解析并显示分页信息
build_page_info(result);
//3、解析显示分页条数据
build_page_nav(result);
}
});
}
function build_emps_table(result) {
//清空table表格,如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
$("#emps_table tbody").empty();
var emps = result.extend.pageInfo.list;
$.each(emps, function(index, item) {
//alert(item.empName);
//构建单元格
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>").append(item.department.deptName);
/**
<button class="btn btn-primary btn-sm">
<i class="icon-edit icon-large"></i> 编辑
</button>
<button class="btn btn-danger btn-sm">
<i class="icon-trash icon-large"></i> 删除
</button>
**/
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<i></i>").addClass("icon-edit icon-large")).append(" 编辑");
//为编辑按钮添加一个自定义的属性，来表示当前员工id
editBtn.attr("edit-id",item.empId);
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
.append($("<i></i>").addClass("icon-trash icon-large")).append(" 删除");
//为删除按钮添加一个自定义的属性来表示当前删除的员工id
delBtn.attr("del-id",item.empId);
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//append方法执行完成以后还是返回原来的元素
$("<tr></tr>")
.append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(deptNameTd)
//.append(editBtn)
//.append(delBtn)
.append(btnTd)
.appendTo("#emps_table tbody");
});
}
//解析显示分页信息
function build_page_info(result){
//请空之前的分页显示信息，如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
$("#page_info_area").empty();
$("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+
"页，总共"+result.extend.pageInfo.pages+"页,总"+result.extend.pageInfo.total+"记录")
g_totalRecords = result.extend.pageInfo.total;
}
//解析显示分页条
function build_page_nav(result) {
//page_nav_area
//请空之前的分页条，如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
//构建元素
var firstPageLi = $("<li></li>").addClass("page-item").append( $("<a></a>").addClass("page-link").attr("href","#").append("首页") );
var prePageLi = $("<li></li>").addClass("page-item").append( $("<a></a>").addClass("page-link").append("«") );
var lastPageLi = $("<li></li>").addClass("page-item").append( $("<a></a>").addClass("page-link").attr("href","#").append("末页") );
var nextPageLi = $("<li></li>").addClass("page-item").append( $("<a></a>").addClass("page-link").append("»") );
//添加首页和前一页 的提示
ul.append(firstPageLi).append(prePageLi);
if(result.extend.pageInfo.hasPreviousPage == false){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}else{
//为元素添加点击翻页的事件
firstPageLi.click(function(){
to_page(1);
});
prePageLi.click(function(){
to_page(result.extend.pageInfo.pageNum -1);
});
}
//遍历页码号1,2，3等，给ul中添加页码提示
$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
var numLi = $("<li></li>").addClass("page-item").append( $("<a></a>").addClass("page-link").append(item) );
if(result.extend.pageInfo.pageNum == item){
numLi.addClass("active");
}
numLi.click(function(){
to_page(item);
});
ul.append(numLi);
})
//添加下一页和末页 的提示
ul.append(nextPageLi).append(lastPageLi);
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}else{
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum +1);
});
lastPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
});
}
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
/********************加载网页模块结束*********************/
/********************添加用户信息模块*********************/
//添加模态框的事件，一开始忘记添加#号了，emp_add_modal_btn
$("#emp_add_modal_btn").click(function(){
//清除表单数据（表单完整重置（表单的数据，表单的样式））
reset_form("#empAddModal form");
//发送ajax请求，弹出部门信息，显示在下拉列表中
getDepts();
//弹出模态框
$("#empAddModal").modal({
backdrop:"static"
});
});
function getDepts(){
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
console.log(result);
//显示部门信息，在下拉列表中
// $("#dept_add_select") 换一种找法
//$("#empAddModal select")
//清除之前留下的 option 标签
$("#empAddModal select").empty();
$.each(result.extend.depts,function(){
var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
optionEle.appendTo("#empAddModal select");
});
}
});
}
//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
//alert("校验测试");
//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
if($(this).attr("ajax-check-user")=="error"){
return false;
}
if(! validate_form_ele("#empName_add_input",g_empName_reg,
g_empName_valid,g_empName_invalid_format))
return false;
if(! validate_form_ele("#email_add_input",g_email_reg,
g_email_valid,g_email_invalid_format))
return false;
//1.将模态框框中的数据提交给服务器进行保存
//2.方式ajax请求，保存员工
//alert($("#empAddModal form").serialize());
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//经过测试，服务器返回的是 json形式的 Msg对象， 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
console.log(result);
//alert(result.msg);
if(result.code==100)
{
//1、员工保存成功，需要关闭模态框。
$("#empAddModal").modal("hide");
//2、来到最后一页，显示刚才的数据；发送ajax请求，显示最后一页数据即可(用总记录数请求，保证是请求足够大，mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验，只会返回最后一页数据)
to_page(g_totalRecords);
}else{
//显示失败信息
//console.log(result);
//有哪个字段的错误信息，就显示哪个字段
//alert(result.extend.errorFileds.email);
//alert(result.extend.errorFileds.empName);
if(undefined!=result.extend.errorFileds.email){
//显示邮箱错误信息
show_validate_msg("#email_add_input","error",result.extend.errorFileds.email);
}
if(undefined!=result.extend.errorFileds.empName){
//显示员工名字错误信息
show_validate_msg("#emPName_add_input","error",result.extend.errorFileds.empName);
}
}
}
});
});
//校验添加的用户名 是否可用。需要在 保存按钮提交前进行 判断，自定义属性留个记号，让保存按钮可用来判断 后端校验情况。
$("#empName_add_input").change(function(){
if(! validate_form_ele("#empName_add_input",g_empName_reg,
g_empName_valid,g_empName_invalid_format))
return false;
//发送 ajax 请求，校验 用户名 是否可用。
var empName = this.value;
$.ajax({
url:"${APP_PATH}/checkUser",
type:"POST",
data:"empName="+empName,
success:function(result){
if(result.code==100){
show_validate_msg("#empName_add_input","success",g_empName_valid);
$("#emp_add_save_btn").attr("ajax-check-user","success");
}else{
show_validate_msg("#empName_add_input","error",result.extend.user_msg)
$("#emp_add_save_btn").attr("ajax-check-user","error");
}
}
});
});
//校验 email框
$("#email_add_input").change(function(){
//校验表单
validate_form_ele("#email_add_input",g_email_reg,g_email_valid,g_email_invalid_format)
});
</script>
</body>
</html>
