SSM整合_年轻人的第一个增删改查（ssm整合思路与配置详解）
ccwgpt 2024-10-29 13:31 38 浏览 0 评论
??有用吗？对于学完Spring、SpringMVC、Mybatis还无从下手的同学来说这是一个很好引子。对于正在学习同一个案例的同学，可能解决一些问题。对于需要这个案例的同学可以直接获取。
??有什么？：xml配置文件编写，引入一个简单的前端框架，使用MyBatis Generator逆向工程生成一些代码，使用框架简单快速搭建一个页面，好用的分页工具PageHelper，简单的前后端分离，发送ajax请求，利用json传递数据，增、删、改、查的简单实现。
??简单吗？内容很简单，涉及Java代码不多，但是对于新手来说，最困难的部分是各种环境搭建、配置文件、版本冲突，如果能够根据错误提示动手解决，那就是一大进步。
??怎么学？如果有时间可以在B站搜索：ssm整合crud，雷丰阳讲的。如果想看到每个功能的实现过程和源码，可以在这里学习，每个步骤都有注释。也可以作为复习快速浏览。
3、新增
前端格式校验、用户名校验、后端校验、JSR303校验，效果如图
1. 员工新增模态框
使用弹出模态框作为新增模块，参考Bootstrap代码
- 在index.jsp添加新增模态框代码
<!-- 为新增按钮增加模态框 ，利用按钮绑定单击事件-->
<!-- Modal -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">员工添加</h4>
</div>
<div class="modal-body">
<!-- 添加表单 -->
<form class="form-horizontal" id="model-form">
<!-- 姓名 -->
<div class="form-group">
<label for="empName_add_input" class="col-sm-2 control-label">EmpName</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="empName" id="empName_add_input"
placeholder="empName">
<!-- 用来显示错误提示 -->
<span class="help-block"></span>
</div>
</div>
<!-- 邮箱 -->
<div class="form-group">
<label for="email_add_input" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" id="email_add_input"
placeholder="empName@123.com">
<!-- 用来显示错误提示 -->
<span class="help-block"></span>
</div>
</div>
<!-- 性别 -->
<div class="form-group">
<label class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<!-- 单选 -->
<label for="gender1_add_input"> <input type="radio"
name="gender" id="gender1_add_input"
name="gender" value="M" checked>
男
</label>
<label for="gender2_add_input"> <input type="radio"
name="gender" id="gender2_add_input"
name="gender" value="F">
女
</label>
</div>
</div>
<!-- 部门下拉框 -->
<div class="form-group">
<label class="col-sm-2 control-label">DeptName</label>
<div class="col-sm-10">
<!-- 部门下拉列表使用ajax查询出来的动态拼接，值为部门id -->
<select class="form-control" name="dId" id="deptName_add_select"></select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
</div>
</div>
</div>
</div>- 绑定单击事件
//添加模态栏 $("#emp_add_modal_btn").click(function() {
//显示模态框
$("#empAddModal").modal({
//模态框参数，点击背景不关闭
backdrop : "static"
});
});- 创建一个查询部门的方法
//新增模态框 $("#emp_add_modal_btn").click(function() {
//添加模态栏之前将所表单信息清空，包括两项验证的css样式，显示模态栏之后就是空的
//reset()方法是dom下的，使用[0]
$("#empAddModal form")[0].reset();
//清空输入格式、重名校验的css样式
reset_form("#empAddModal form");
//获取所有部门信息
getDepts("#deptName_add_select");
//添加模态框，在模态框中需要所有部门，所以需要查询所有部门信息
$("#empAddModal").modal({
//模态框参数，点击背景不关闭
backdrop : "static"
});
});
//后面用
//新增模态框--清除表单数据，样式
function reset_form(ele) {
$(ele)[0].reset();
//该元素下所有css清除
$(ele).find("*").removeClass("has-error has-success");
//显示警告信息部分清空
$(ele).find(".help-block").text("");
}- 发送查询部门的ajax请求
//新增模态框--请求所有部门信息 function getDepts(ele){
//---注意这里要清空---
$(ele).empty();
$.ajax({
url:"${PATH}/depts",
type:"GET",
success:function(result){
//console.log(result);
//动态拼接
}
});
}package com.ssm.controller;
import com.ssm.bean.Department;
import com.ssm.bean.Msg;
import com.ssm.service.DepartmentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
/**
* 部门信息
*/
@Controller
public class DepartmentController {
@Autowired
private DepartmentService departmentService;
/**
* 获取所有部门信息
* @return
*/
@ResponseBody
@RequestMapping("/depts")
public Msg getDepts() {
List<Department> depts = departmentService.getDepts();
return Msg.success().add("depts", depts);
}
}- 创建DepartmentService
package com.ssm.service;
import com.ssm.bean.Department;
import com.ssm.dao.DepartmentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* 部门信息
*/
@Service
public class DepartmentService {
@Autowired
DepartmentMapper departmentMapper;
/**
* 查询所有部门
*/
public List<Department> getDepts(){
//方法本身可以添加查询条件，如果为null代表查所有
List<Department> list = departmentMapper.selectByExample(null);
return list;
}
}- 动态拼接
//新增模态框--请求所有部门信息 function getDepts(ele){
//---注意这里要清空---
$(ele).empty();
$.ajax({
url:"${PATH}/depts",
type:"GET",
success:function(result){
//console.log(result);
$.each(result.extend.depts,function(index,item){
//创建出option并添加到select中
var optionEle = $("<option></option>").append(item.deptName).attr("value",item.deptId);
optionEle.appendTo(ele);
});
}
});
}效果
2. 基本员工新增
绑定保存按钮
//------------------增删改查都使用REST风格------------------- //新增保存信息
$("#emp_save_btn").click(function(){
//1、模态框中填写的表单数据提交给服务器进行保存
//2、发送ajax请求保存员工
$.ajax({
url:"${PATH}/saveemp",
type:"POST",
data:$("#empAddModal form").serialize(),
//.serialize()方法能将表单中数据序列化，直接发送给controll封装成Bean
//console.log($("#empAddModal form").serialize());
//empName=Tom&email=Tom%40123.com&gender=M&dId=1
success:function(result){
//1.添加成功，关闭模态框
$("#empAddModal").modal("hide");
//2.来到最后一页，显示插入的数据，可以直接跳到一个很大的页数，因为
//合理性，所以不会超出，这里使用全局参数，数据总条数
to_page(totalRecord+1);
}
});
EmployeeController
@ResponseBody @RequestMapping(value = "/saveemp",method = RequestMethod.POST)
public Msg saveEmp(Employee employee, BindingResult result) {
employeeService.saveEmp(employee);
return Msg.success();
}EmployeeService
/**
* 保存emp员工，insert
* @param employee
*/
public void saveEmp(Employee employee) {
//这个是有选择插入，insert()全插入，包括id
employeeMapper.insertSelective(employee);
}前端校验
一共有两种验证方式 1.输入框焦点单独验证 2.提交按钮总验证，为了不两种方式的css样式相互覆盖，每种方式都验两遍，格式在前，用户名在后
（内部Java格式验证）+ ajax用户名验证（实现方法看下一小节）
//1.（内部Java格式验证）+ ajax用户名验证 //新增保存信息--ajax用户名校验
//由于在java内又做了一次格式验证，所以这个方法相当于即验证了格式，又验证了重名
$("#empName_add_input").blur(function () {
//发送ajax请求，验证用户名是否可用
var empName = this.value;
$.ajax({
url: "${PATH}/checkname",
data: "empName=" + empName,
type: "POST",
success: function (result) {
console.log(result);
//获取到返回值，Msg中的状态码
if (result.code == 2333) {
show_validate_msg("#empName_add_input", "success", "用户名可用");
//因为使用了两种方式验证，格式和重名，会有css样式冲突覆盖，所以再加一次验证
//自定义属性，或全局变量
//给添加按钮添加自定义属性，在提交时判断是否通过两项验证。
$("#emp_save_btn").attr("ajax-vl", "success");
} else if (result.code == 5555) {
show_validate_msg("#empName_add_input", "error", result.extend.msg);
$("#emp_save_btn").attr("ajax-vl", "error");
}
}
});
});邮箱格式独立校验
//2. 邮箱独立验证 //新增保存信息--独立邮箱格式验证
$("#email_add_input").blur(function () {
var email = $("#email_add_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if (!regEmail.test(email)) {
//alert("邮箱格式不正确");
show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
//return false;
} else {
show_validate_msg("#email_add_input", "success", "");
}
//最后方法通过
//return true;
})格式+用户名验证+提交保存请求
//3. 格式+用户名验证+提交保存请求，一共有两种验证方式 1.输入框焦点单独验证 2.提交按钮总验证， //为了不两种方式的css样式相互覆盖，每种方式都验两遍，格式在前，用户名在后
//新增保存信息--请求
$("#emp_save_btn").click(function () {
//点击就发送请求，保存使用POST请求
//1.先验证ajax重名校验，防止用户输入重复用户名之后，直接输入正确的邮箱，点击提交，重名的验证提示会被覆盖
//ajax-vl是ajax重名校验之后添加的自定义属性，用于表示提交按钮是否可用
if ($(this).attr("ajax-vl") == "error") {
return false;
}
//2.点击保存按钮请求之前完整验证一遍输入格式
//JQuery格式总验证
if (!validate_add_form()) {
return false;
}
//3.重名验证
//ajax重名校验
if ($(this).attr("ajax-vl") == "error") {
return false;
}
//1、模态框中填写的表单数据提交给服务器进行保存
//2、发送ajax请求保存员工
$.ajax({
url: "${PATH}/saveemp",
type: "POST",
data: $("#empAddModal form").serialize(),
//.serialize()方法能将表单中数据序列化，直接发送给controll封装成Bean
//console.log($("#empAddModal form").serialize());
//empName=Tom&email=Tom%40123.com&gender=M&dId=1
success: function (result) {
//1.添加成功，关闭模态框
$("#empAddModal").modal("hide");
//2.来到最后一页，显示插入的数据，可以直接跳到一个很大的页数，因为
//合理性，所以不会超出，这里使用全局参数，参数值在上面分页时获取的，数据总条数+1保证不出现极端情况
to_page(totalRecord + 1);
}
});
});请求按钮JQuery格式总校验方法
//新增保存信息--请求按钮JQuery格式总校验方法 function validate_add_form() {
console.log("validate_add_form()")
//1.拿到校验的数据，使用正则表达式
//根据bootstrap提供的组件
//校验用户名
var empName = $("#empName_add_input").val();
var regName = /(^[a-zA-Z0-9_-]{2,8}$)|(^[\u2E80-\u9FFF]{2,5})/;
if (!regName.test(empName)) {
//alert("用户名可以是2-5位中文或者2-8位英文和数字的组合");
show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或者2-8位英文和数字的组合");
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(email)) {
//alert("邮箱格式不正确");
show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
return false;
} else {
show_validate_msg("#email_add_input", "success", "");
}
//最后方法通过
return true;
}添加样式方法
//新增保存信息--添加css样式 //show_validate_msg显示校验状态，通过添加样式，ele表示被选择元素，status状态
//用来判断是用什么样式，绿色、红色，msg提示信息
function show_validate_msg(ele, status, msg) {
//判断之前先清空之前样式
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if ("success" == status) {
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg)
} else if ("error" == status) {
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg)
}
}4. ajax用户名校验
如果添加相同的用户名会造成混淆，所以在输入用户名之后立即进行校验
发送ajax请求（与上一节相同）
$("#empName_add_input").blur(function () {
//发送ajax请求，验证用户名是否可用
var empName = this.value;
$.ajax({
url: "${PATH}/checkname",
data: "empName=" + empName,
type: "POST",
success: function (result) {
console.log(result);
//获取到返回值，Msg中的状态码
if (result.code == 2333) {
show_validate_msg("#empName_add_input", "success", "用户名可用");
//因为使用了两种方式验证，格式和重名，会有css样式冲突覆盖，所以再加一次验证
//自定义属性，或全局变量
//给添加按钮添加自定义属性，在提交时判断是否通过两项验证。
$("#emp_save_btn").attr("ajax-vl", "success");
} else if (result.code == 5555) {
show_validate_msg("#empName_add_input", "error", result.extend.msg);
$("#emp_save_btn").attr("ajax-vl", "error");
}
}
});
});EmployeeController
/**
* 用户名查重
* 前端校验，在失去焦点，保存之前都校验
* @param empName
* @return
*/
@ResponseBody
@RequestMapping("/checkname")
public Msg checkEmpName(@RequestParam("empName")String empName) {
//用户名格式校验
String regx = "(^[a-zA-Z0-9_-]{2,8}$)|(^[\\u2E80-\\u9FFF]{2,5})";
if(!empName.matches(regx)){
return Msg.fail().add("msg", "用户名可以是2-5位中文或者2-8位英文和数字的组合");
}
//返回查询统计结果，true说明没有重名
boolean b = employeeService.checkEmpName(empName);
if(b) {
return Msg.success();
}else {
return Msg.fail().add("msg", "用户名已存在");
}
}EmployeeService
/**
* 查询用户是否存在
* 使用Example复杂查询
*
* @param name
* @return
*/
public boolean checkEmpName(String name) {
//Example用法
EmployeeExample example = new EmployeeExample();
//创建查询条件
EmployeeExample.Criteria criteria = example.createCriteria();
//我的理解：这一句相当于添加了一个条件 where empName=name
criteria.andEmpNameEqualTo(name);
//统计查询结构
long count = employeeMapper.countByExample(example);
//返回true(0)说明没有重复用户名
return count == 0;
}5. JSR303校验
前面是前端校验，现在是后端校验，针对Java
添加JSR303依赖
<!-- JSR303校验 -->
<!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator -->
<dependency>
<groupId>org.hibernate.validator</groupId>
<artifactId>hibernate-validator</artifactId>
<version>6.1.0.Final</version>
</dependency>在JavaBean上添加注解
public class Employee {
private Integer empId;
//JSR303自定义校验规则
@Pattern(regexp = "(^[a-zA-Z0-9_-]{2,8}$)|(^[\\u2E80-\\u9FFF]{2,5})", message = "用户名可以是2-5位中文或者2-8位英文和数字的组合")
private String empName;
private String gender;
@Pattern(regexp = "^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})#34;,message = "邮箱格式不正确")
private String email;
//...在Controller方法中使用，在参数前添加注解，在参数后面添加结果参数
/**
* 新增，保存用户,并验证
*
* 添加JSR303校验
* @Valid表示校验下一个对象
* BindingResult紧跟被校验对象，接收结果
*
* @param employee
* @return
*/
@ResponseBody
@RequestMapping(value = "/saveemp",method = RequestMethod.POST)
public Msg saveEmp(@Valid Employee employee, BindingResult result) {
if(result.hasErrors()) {
//格式校验失败，返回信息
Map<String ,Object> map = new HashMap<>();
List<FieldError> fieldErrors = result.getFieldErrors();
for(FieldError error : fieldErrors) {
System.out.println("错误的字段名:" + error.getField());
System.out.println("错误信息:" + error.getDefaultMessage());
//将错误信息放到map中
map.put(error.getField(), error.getDefaultMessage());
}
return Msg.fail().add("errorFields", map);
}else if(!employeeService.checkEmpName(employee.getEmpName())){
//后端在保存的时候再次验证是否存在用户名---有点 重复的感觉？？？
//因为是在一起接收所以错误信息一定要一样，empName手动写上
return Msg.fail().add("empName", "用户名已存在");
}else {
employeeService.saveEmp(employee);
//不用这种：获取总页数，用在新增完之后跳转到最后一页，不过这样就会多查一次数据库
//PageInfo<Employee> pageInfo = employeeService.getPage(null);
//return Msg.success().add("pageInfo", pageInfo);
return Msg.success();
}
}在index.jsp提交按钮中处理返回结果
//3. 格式+用户名验证+提交保存请求，一共有两种验证方式 1.输入框焦点单独验证 2.提交按钮总验证， //为了不两种方式的css样式相互覆盖，每种方式都验两遍，格式在前，用户名在后
//新增保存信息--请求
$("#emp_save_btn").click(function () {
//点击就发送请求，保存使用POST请求
//1.先验证ajax重名校验，防止用户输入重复用户名之后，直接输入正确的邮箱，点击提交，重名的验证提示会被覆盖
if ($(this).attr("ajax-vl") == "error") {
return false;
}
//2.点击保存按钮请求之前完整验证一遍输入格式
console.log("JQuery格式总验证")
//方法一：JQuery格式总验证
if (!validate_add_form()) {
return false;
}
//3.重名验证
console.log("ajax重名校验")
//ajax重名校验
if ($(this).attr("ajax-vl") == "error") {
return false;
}
//1、模态框中填写的表单数据提交给服务器进行保存
//2、发送ajax请求保存员工
$.ajax({
url: "${PATH}/saveemp",
type: "POST",
data: $("#empAddModal form").serialize(),
//.serialize()方法能将表单中数据序列化，直接发送给controll封装成Bean
//console.log($("#empAddModal form").serialize());
//empName=Tom&email=Tom%40123.com&gender=M&dId=1
success: function (result) {
//清除模态框和提示信息
$("#empAddModal form").find("*").removeClass("has-error has-success");
$("#empAddModal form").find(".help-block").text("");
//在这里判断后端JSR303校验结果，最后一次！！！！！！！！！真的
//前后端验证可以独立运行，注释前端后端也能实现一样效果
if(result.code == 2333){
//alert(result.msg);
//1.添加成功，关闭模态框
$("#empAddModal").modal("hide");
//2.来到最后一页，显示插入的数据，可以直接跳到一个很大的页数，因为
//合理性，所以不会超出，这里使用全局参数，数据总条数+1保证不出现极端情况
to_page(totalRecord + 1);
}else{
//失败，显示信息，有几个就显示几个
//undefined 就是没找到这个错误，说明正确，可用alert(result.extend.errorFields.empName)验证
//用户名格式
//alert(result.extend.errorFields.empName)
//用户名格式和查重，因为查重的属性格式和格式验证不同，所以不能分开
//result.extend.errorFields.empName 格式验证
//result.extend.empName 查重验证
if(undefined != result.extend.errorFields ){
//格式错误
if(undefined != result.extend.errorFields.empName){
show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName);
}
}else{
if(undefined != result.extend.empName){
//查重错误
show_validate_msg("#empName_add_input","error",result.extend.empName);
}
}
//邮箱格式判断
if(undefined != result.extend.errorFields){
if(undefined != result.extend.errorFields.email){
show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
}
}
}
}
});
});6. 完整代码
模态框
<!-- 为新增按钮增加模态框 ，利用按钮绑定单击事件-->
<!-- Modal -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">员工添加</h4>
</div>
<div class="modal-body">
<!-- 添加表单 -->
<form class="form-horizontal" id="model-form">
<!-- 姓名 -->
<div class="form-group">
<label for="empName_add_input" class="col-sm-2 control-label">EmpName</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="empName" id="empName_add_input"
placeholder="empName">
<!-- 用来显示错误提示 -->
<span class="help-block"></span>
</div>
</div>
<!-- 邮箱 -->
<div class="form-group">
<label for="email_add_input" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" id="email_add_input"
placeholder="empName@123.com">
<!-- 用来显示错误提示 -->
<span class="help-block"></span>
</div>
</div>
<!-- 性别 -->
<div class="form-group">
<label class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<!-- 单选 -->
<label for="gender1_add_input"> <input type="radio"
name="gender" id="gender1_add_input"
name="gender" value="M" checked>
男
</label>
<label for="gender2_add_input"> <input type="radio"
name="gender" id="gender2_add_input"
name="gender" value="F">
女
</label>
</div>
</div>
<!-- 部门下拉框 -->
<div class="form-group">
<label class="col-sm-2 control-label">DeptName</label>
<div class="col-sm-10">
<!-- 部门下拉列表使用ajax查询出来的动态拼接，值为部门id -->
<select class="form-control" name="dId" id="deptName_add_select"></select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
</div>
</div>
</div>
</div>请求和方法
<script type="text/javascript">
//------------------增删改查都使用REST风格-------------------
//1.（内部Java格式验证）+ ajax用户名验证
//新增保存信息--ajax用户名校验
//由于在java内又做了一次格式验证，所以这个方法相当于即验证了格式，又验证了重名
$("#empName_add_input").blur(function () {
//发送ajax请求，验证用户名是否可用
var empName = this.value;
$.ajax({
url: "${PATH}/checkname",
data: "empName=" + empName,
type: "POST",
success: function (result) {
console.log(result);
//获取到返回值，Msg中的状态码
if (result.code == 2333) {
show_validate_msg("#empName_add_input", "success", "用户名可用");
//因为使用了两种方式验证，格式和重名，会有css样式冲突覆盖，所以再加一次验证
//自定义属性，或全局变量
//给添加按钮添加自定义属性，在提交时判断是否通过两项验证。
$("#emp_save_btn").attr("ajax-vl", "success");
} else if (result.code == 5555) {
show_validate_msg("#empName_add_input", "error", result.extend.msg);
$("#emp_save_btn").attr("ajax-vl", "error");
}
}
});
});
//2. 邮箱独立验证
//新增保存信息--独立邮箱格式验证
$("#email_add_input").blur(function () {
var email = $("#email_add_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if (!regEmail.test(email)) {
//alert("邮箱格式不正确");
show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
//return false;
} else {
show_validate_msg("#email_add_input", "success", "");
}
//最后方法通过
//return true;
})
//3. 格式+用户名验证+提交保存请求，一共有两种验证方式 1.输入框焦点单独验证 2.提交按钮总验证，
//为了不两种方式的css样式相互覆盖，每种方式都验两遍，格式在前，用户名在后
//新增保存信息--请求
$("#emp_save_btn").click(function () {
//点击就发送请求，保存使用POST请求
//1.先验证ajax重名校验，防止用户输入重复用户名之后，直接输入正确的邮箱，点击提交，重名的验证提示会被覆盖
if ($(this).attr("ajax-vl") == "error") {
return false;
}
//2.点击保存按钮请求之前完整验证一遍输入格式
console.log("JQuery格式总验证")
//方法一：JQuery格式总验证
if (!validate_add_form()) {
return false;
}
//3.重名验证
console.log("ajax重名校验")
//ajax重名校验
if ($(this).attr("ajax-vl") == "error") {
return false;
}
//1、模态框中填写的表单数据提交给服务器进行保存
//2、发送ajax请求保存员工
$.ajax({
url: "${PATH}/saveemp",
type: "POST",
data: $("#empAddModal form").serialize(),
//.serialize()方法能将表单中数据序列化，直接发送给controll封装成Bean
//console.log($("#empAddModal form").serialize());
//empName=Tom&email=Tom%40123.com&gender=M&dId=1
success: function (result) {
//清除模态框和提示信息
$("#empAddModal form").find("*").removeClass("has-error has-success");
$("#empAddModal form").find(".help-block").text("");
//在这里判断后端JSR303校验结果，最后一次！！！！！！！！！真的
//前后端验证可以独立运行，注释前端后端也能实现一样效果
if(result.code == 2333){
//alert(result.msg);
//1.添加成功，关闭模态框
$("#empAddModal").modal("hide");
//2.来到最后一页，显示插入的数据，可以直接跳到一个很大的页数，因为
//合理性，所以不会超出，这里使用全局参数，数据总条数+1保证不出现极端情况
to_page(totalRecord + 1);
}else{
//失败，显示信息，有几个就显示几个
//undefined 就是没找到这个错误，说明正确，可用alert(result.extend.errorFields.empName)验证
//用户名格式
//alert(result.extend.errorFields.empName)
//用户名格式和查重，因为查重的属性格式和格式验证不同，所以不能分开
//result.extend.errorFields.empName 格式验证
//result.extend.empName 查重验证
if(undefined != result.extend.errorFields ){
//格式错误
if(undefined != result.extend.errorFields.empName){
show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName);
}
}else{
if(undefined != result.extend.empName){
//查重错误
show_validate_msg("#empName_add_input","error",result.extend.empName);
}
}
//邮箱格式判断
if(undefined != result.extend.errorFields){
if(undefined != result.extend.errorFields.email){
show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
}
}
}
}
});
});
//新增保存信息--请求按钮JQuery格式总校验方法
function validate_add_form() {
console.log("validate_add_form()")
//1.拿到校验的数据，使用正则表达式
//根据bootstrap提供的组件
//校验用户名
var empName = $("#empName_add_input").val();
var regName = /(^[a-zA-Z0-9_-]{2,8}$)|(^[\u2E80-\u9FFF]{2,5})/;
if (!regName.test(empName)) {
//alert("用户名可以是2-5位中文或者2-8位英文和数字的组合");
show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或者2-8位英文和数字的组合");
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(email)) {
//alert("邮箱格式不正确");
show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
return false;
} else {
show_validate_msg("#email_add_input", "success", "");
}
//最后方法通过
return true;
}
//新增保存信息--添加css样式
//show_validate_msg显示校验状态，通过添加样式，ele表示被选择元素，status状态
//用来判断是用什么样式，绿色、红色，msg提示信息
function show_validate_msg(ele, status, msg) {
//判断之前先清空之前样式
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if ("success" == status) {
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg)
} else if ("error" == status) {
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg)
}
}
</script>__EOF__
本文作者： 蔚然丶丶
本文链接： https://www.cnblogs.com/wei-ran/p/16131419.html
相关推荐
- 滨州维修服务部“一区一策”强服务
-
今年以来，胜利油田地面工程维修中心滨州维修服务部探索实施“一区一策”服务模式，持续拓展新技术应用场景，以优质的服务、先进的技术，助力解决管理区各类维修难题。服务部坚持问题导向，常态化对服务范围内的13...
- 谷歌A2A协议和MCP协议有什么区别?A2A和MCP的差异是什么?
-
在人工智能的快速发展中，如何实现AI模型与外部系统的高效协作成为关键问题。谷歌主导的A2A协议（Agent-to-AgentProtocol）和Anthropic公司提出的MCP协议(ModelC...
- 谷歌大脑用架构搜索发现更好的特征金字塔结构，超越Mask-RCNN等
-
【新智元导读】谷歌大脑的研究人员发表最新成果，他们采用神经结构搜索发现了一种新的特征金字塔结构NAS-FPN，可实现比MaskR-CNN、FPN、SSD更快更好的目标检测。目前用于目标检测的最先...
- 一文彻底搞懂谷歌的Agent2Agent(A2A)协议
-
前段时间，相信大家都被谷歌发布的Agent2Agent开源协议刷屏了，简称A2A。谷歌官方也表示，A2A是在MCP之后的补充，也就是MCP可以强化大模型/Agent的能力，但每个大模型/Agent互为...
- 谷歌提出创新神经记忆架构，突破Transformer长上下文限制
-
让AI模型拥有人类的记忆能力一直是学界关注的重要课题。传统的深度学习模型虽然在许多任务上取得了显著成效，但在处理需要长期记忆的任务时往往力不从心。就像人类可以轻松记住数天前看过的文章重点，但目前的...
- 不懂设计?AI助力，人人都能成为UI设计师!
-
最近公司UI资源十分紧张，急需要通过AI来解决UI人员不足问题，我在网上发现了几款AI应用非常适合用来进行UI设计。以下是一些目前非常流行且功能强大的工具，它们能够提高UI设计效率，并帮助设计师创造出...
- 速来!手把手教你用AI完成UI界面设计
-
晨星技术说晨星技术小课堂第二季谭同学-联想晨星用户体验设计师-【晨星小课堂】讲师通过简单、清晰的语言描述就能够用几十秒自动生成一组可编辑的UI界面，AIGC对于UI设计师而言已经逐步发展成了帮助我们...
- 「分享」一端录制，多端使用的便捷 UI 自动化测试工具，开源
-
一、项目介绍Recorder是一款UI录制和回归测试工具，用于录制浏览器页面UI的操作。通过UIRecorder的录制功能，可以在自测的同时，完成测试过程的录制，生成JavaScr...
- APP自动化测试系列之Appium介绍及运行原理
-
在面试APP自动化时，有的面试官可能会问Appium的运行原理，以下介绍Appium运行原理。Appium介绍Appium概念Appium是一个开源测试自动化框架，可用于原生，混合和移动Web应用程序...
- 【推荐】一个基于 SpringBoot 框架开发的 OA 办公自动化系统
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍oasys是一个基于springboot框架开发的OA办公自动化系统，旨在提高组织的日常运作和管理...
- 自动化实践之:从UI到接口，Playwright给你全包了!
-
作者：京东保险宋阳1背景在车险系统中，对接保司的数量众多。每当系统有新功能迭代后，基本上各个保司的报价流程都需要进行回归测试。由于保司数量多，回归测试的场景也会变得重复而繁琐，给测试团队带来了巨大的...
- 销帮帮CRM移动端UI自动化测试实践:Playwright的落地与应用
-
实施背景销帮帮自2015年成立以来，移动端UI自动化测试的落地举步维艰，移动端的UI自动化测试一直以来都未取得良好的落地。然而移动互联网时代，怎样落地移动端的UI自动化测试以快速稳定进行移动端的端到端...
- 编写自动化框架不知道该如何记录日志吗?3个方法打包呈现给你。
-
目录结构1.loguru介绍1.1什么是日志？程序运行过程中，难免会遇到各种报错。如果这种报错是在本地发现的，你还可以进行debug。但是如果程序已经上线了，你就不能使用debug方式了...
- 聊聊Python自动化脚本部署服务器全流程(详细)
-
来源：AirPython作者：星安果1.前言大家好，我是安果！日常编写的Python自动化程序，如果在本地运行稳定后，就可以考虑将它部署到服务器，结合定时任务完全解放双手但是，由于自动化程序与平...
- 「干货分享」推荐5个可以让你事半功倍的Python自动化脚本
-
作者：俊欣来源：关于数据分析与可视化相信大家都听说自动化流水线、自动化办公等专业术语，在尽量少的人工干预的情况下，机器就可以根据固定的程序指令来完成任务，大大提高了工作效率。今天小编来为大家介绍几个P...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- ui自动化框架 (47)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)