寫在前面
SSM整合_年輕人的第一個增刪改查_基礎環境搭建
SSM整合_年輕人的第一個增刪改查_查詢
SSM整合_年輕人的第一個增刪改查_新增
SSM整合_年輕人的第一個增刪改查_修改
SSM整合_年輕人的第一個增刪改查_刪除
GitHub：https://github.com/say-hey/ssm_crud
Gitee：https://gitee.com/say-hey/ssm_crud
有用嗎？對於學完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); //動態拼接 } }); } -
建立DepartmentController
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); }
3. 前端校驗
一共有兩種驗證方式 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})$",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>