新增员工信息的时候，点击保存的时候需要校验：
1 使用alert和正则表达式：
function validate_add_form(){
var empName = $("#empName").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5})/;
if (!regName.test(empName)){
alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
return false;
}
var email = $("#email").val();
var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
if(!regEmail.test(email)){
alert("邮箱格式不正确！");
return false;
}
return true;
}
/**
* 点击保存按钮，保存员工信息
*/
$("#emp_save_btn").click(function () {
//1 先校验 !validate_add_form()==true的时候说明校验有问题
if(!validate_add_form()){
return false;
}
//2 发送AJAX请求保存员工信息
$.ajax({
url:"${APP_PATH}/emp/save",
type: "POST",
data:$("#emp_add_form").serialize(),
success: function (result) {
if(result.code = 100){
alert("保存成功");
//1 关闭模态框
$("#Emp_Add_Modal").modal("hide");
//2、来到最后一页，显示刚才保存的数据
//发送ajax请求显示最后一页数据即可
to_page(totalRecord);
}
}
});
});
2 使用Bootstrap的校验状态
function validate_add_form(){
var empName = $("#empName").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5})/;
if (!regName.test(empName)){
// alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
$("#empName").parent().addClass("has-error");
$("#empName").next("span").text("用户名可以是2-5位中文或者6-16位英文和数字的组合");
return false;
}else{
$("#empName").parent().addClass("has-success");
}
var email = $("#email").val();
var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
if(!regEmail.test(email)){
//alert("邮箱格式不正确！");
$("#email").parent().addClass("has-error");
$("#email").next("span").text("邮箱格式不正确！");
return false;
}else{
$("#email").parent().addClass("has-success");
}
return true;
}
如图所示：
封装成方法并且去调用：
function show_validate_msg(ele, status, msg) {
//清除当前元素的校验状态
$(ele).parent().removeClass("has-error has-success");
$(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);
}
}
function validate_add_form(){
//验证用户名
var empName = $("#empName").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5})/;
if (!regName.test(empName)){
// alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
/* $("#empName").parent().addClass("has-error");
$("#empName").next("span").text("用户名可以是2-5位中文或者6-16位英文和数字的组合");*/
show_validate_msg("#empName", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");
return false;
}else{
show_validate_msg("#empName", "success", "");
/* $("#empName").parent().addClass("has-success");*/
}
//验证邮箱
var email = $("#email").val();
var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
if(!regEmail.test(email)){
//alert("邮箱格式不正确！");
/* $("#email").parent().addClass("has-error");
$("#email").next("span").text("邮箱格式不正确！");*/
show_validate_msg("#email", "error", "邮箱格式不正确！");
return false;
}else{
/* $("#email").parent().addClass("has-success");*/
show_validate_msg("#email", "success", "");
}
return true;
}
3 Ajax验证用户名重复
使用Ajax验证用户名是否重复，做到如下要求：
1) 输入用户名，当离开输入框以后就要立即去判断用户名是否重复，且给出提示；提示来自后台的验证；
2 )表单有提示信息以后，关闭再点击，需要清除表单中出现的信息。
3)后台需要验证用户名是否重复；
同时需要验证用户名格式是否正确，否则就是在后台保存以后，前台再去验证，这样做逻辑不对；
首先后台实现：
EmployeeService.java
/** * 查询员工是否存在 * @param empName * @return */ public boolean checkUserExists(String empName){ EmployeeExample employeeExample = new EmployeeExample(); employeeExample.createCriteria().andEmpNameEqualTo(empName); int count = employeeMapper.countByExample(employeeExample); return count == 0; }
EmployeeController.java
@RequestMapping(value ={"emp/checkUser"})
@ResponseBody
public Msg checkUser(@RequestParam("empName") String empName){
String regName = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})";
if (!empName.matches(regName)){
return Msg.fail().add("validate_error_msg", "用户名必须是6-16位数字和字母的组合或者2-5位中文");
}
boolean b = employeeService.checkUserExists(empName);
if (b){
return Msg.success();
}else {
return Msg.fail().add("validate_error_msg", "用户名重复！");
}
}
前台Ajax:
输入用户名以后，离开输入框即验证并且给出提示：
/**
* change:检测到输入框有改变后就会去验证用户名是否重复:
*/
//校验用户名是否重复
$("#empName").change(function () {
var empName = this.value;
$.ajax({
url: "${APP_PATH}/emp/checkUser",
data:"empName="+ empName,
type:"POST",
success: function (result) {
if(result.code == 100){
show_validate_msg("#empName", "success", "用户名可用");
$("#emp_save_btn").attr("empName_validate", "success");
}else {
//显示后台验证的错误信息
show_validate_msg("#empName", "error", result.extendInfo.validate_error_msg);
$("#emp_save_btn").attr("empName_validate", "error");
}
}
});
});
点击保存后，需要判断用户名是否重复：
//2 看用户名是否重复
if($("#empName").attr("empName_validate") == "error"){
return false;
}
/**
* 点击保存按钮，保存员工信息
*/
$("#emp_save_btn").click(function () {
//1 先校验 !validate_add_form()==true的时候说明校验有问题
if(!validate_add_form()){
return false;
}
//2 看用户名是否重复
if($("#empName").attr("empName_validate") == "error"){
return false;
}
//3 发送AJAX请求保存员工信息
$.ajax({
url:"${APP_PATH}/emp/save",
type: "POST",
data:$("#emp_add_form").serialize(),
success: function (result) {
if(result.code = 100){
alert("保存成功");
//1 关闭模态框
$("#Emp_Add_Modal").modal("hide");
//2、来到最后一页，显示刚才保存的数据
//发送ajax请求显示最后一页数据即可
to_page(totalRecord);
}
}
});
});
同时，有错后模态框上会有错误提示信息，当关闭后再点击新增，需要清除这些错误信息：
function reset_form(ele){
$(ele)[0].reset();
//清空表单样式
$(ele).find("*").removeClass("has-error has-success");
$(ele).find(".help-block").text("");
}
/**
* 点击新增按钮，填写新增员工信息
* 新增之前需要清除样式
*/
$("#emp_add_btn").click(function () {
//清楚表单样式
reset_form("#Emp_Add_Modal form");
//1 获取部门信息，并显示在下拉框中
getDeptName("#deptName_select");
//2 显示模态框
$('#Emp_Add_Modal').modal({
backdrop:static,
keyboard:true
});
});
完整代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!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"> <title>员工信息显示</title> <% pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script> <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <!--新增员工Model框--> <div class="modal fade" id="Emp_Add_Modal" tabindex="-1" role="dialog" aria-labelledby="Emp_Add_Modal_label"> <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="emp_add_form"> <div class="form-group"> <label for="empName" class="col-sm-2 control-label">empName:</label> <div class="col-sm-10"> <input type="text" class="form-control" name="empName" id="empName" placeholder="empName"> <span id="helpBlock11" class="help-block"></span> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">email:</label> <div class="col-sm-10"> <input type="email" class="form-control" name="eamil" id="email" placeholder="email"> <span id="helpBlock22" class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">gender:</label> <div class="col-sm-offset-2 col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="gender1_input" checked="checked" value="M"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2_input" value="F"> 女 </label> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">deptName:</label> <div class="col-sm-4"> <select class="form-control" name="dId" id="deptName_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> <!--显示页面--> <div class="container"> <!-- 标题 --> <div class="row"> <div class="col-md-4"> <h1>SSM练手项目-CRUD</h1> </div> </div> <!-- 操作按钮 --> <div class="row"> <div class="col-md-4 col-md-offset-8"> <button class="btn btn-primary" id="emp_add_btn" data-toggle="modal" data-target="#Emp_Add_Modal">新增</button> <button class="btn btn-danger" id="emp_delete_btn">删除</button> </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>email</th> <th>gender</th> <th>deptName</th> <th>Option</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <!-- 分页信息 --> <div class="row"> <div class="col-md-6" id="page_info"> </div> <div class="col-md-6" id="nav_pagination_info"> </div> </div> </div> <script type="text/javascript"> var totalRecord; $(function(){ //默认去首页 to_page(1); }) function to_page(pageNo) { $.ajax({ url:"${APP_PATH}/emp/list2", data:"pageNo="+pageNo, 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) { //清空表格 $("#emps_table tbody").empty(); var emps = result.extendInfo.pageInfo.list; $.each(emps, function (index, item) { var empIdTd = $("<td></td>").append(item.empId); var empNameTd = $("<td></td>").append(item.empName); var emailTd = $("<td></td>").append(item.eamil); var genderId = $("<td></td>").append(item.gender=="M"?"男":"女"); var deptNameTd = $("<td></td>").append(item.department.deptName); var editBtn = $("<button></button>").addClass("btn btn-info btn-sm") .append( $("<span></span>").addClass("glyphicon glyphicon-pencil") .append("编辑")); var deleteBtn = $("<button></button>").addClass("btn btn-danger btn-sm") .append( $("<span></span>").addClass("glyphicon glyphicon-trash") .append("删除")); $("<tr></tr>").append(empIdTd) .append(empNameTd) .append(emailTd) .append(genderId) .append(deptNameTd) .append(editBtn) .append(" ") .append(deleteBtn) .appendTo("#emps_table tbody"); }) } function build_page_info(result) { //清空 $("#page_info").empty(); var pageInfo = result.extendInfo.pageInfo; var curPage = pageInfo.pageNum; var pages = pageInfo.pages; var totalPages = pageInfo.total; $("#page_info").append(" 当前第"+curPage+"页,") .append("共有"+ pages +"页,") .append("总共"+ totalPages + "条记录数"); totalRecord = totalPages; } function build_page_nav(result) { //清空 $("#nav_pagination_info").empty(); var nav = $("<nav></nav>"); var ul = $("<tr></tr>").addClass("pagination"); //首页、上一页 var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#")); var prePageLi = $("<li></li>").append($("<a></a>").append("«")); //首页禁止点击，并且不显示数据 if(result.extendInfo.pageInfo.hasPreviousPage == false){ firstPageLi.addClass("disabled"); prePageLi.addClass("disabled"); }else { //首页，上一页添加事件，显示对应页码数据 firstPageLi.click(function () { to_page(1) }); prePageLi.click(function () { to_page(result.extendInfo.pageInfo.pageNum-1); }); } //末页、下一页 var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#")); var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); //末页禁止点击，并且不显示数据 if(result.extendInfo.pageInfo.hasNextPage == false){ lastPageLi.addClass("disabled"); nextPageLi.addClass("disabled"); }else{ //末页，下一页添加事件，显示对应页码数据 lastPageLi.click(function () { to_page(result.extendInfo.pageInfo.pages); }); nextPageLi.click(function () { to_page(result.extendInfo.pageInfo.pageNum + 1); }); } ul.append(firstPageLi).append(prePageLi); //1,2,3,4,5页码显示 $.each(result.extendInfo.pageInfo.navigatepageNums, function (index, item) { var numLi = $("<li></li>").append($("<a></a>").append(item)); if(result.extendInfo.pageInfo.pageNum == item){ numLi.addClass("active"); } //点击页码跳转到对应页码并显示对应数据 numLi.click(function(){ to_page(item); }); ul.append(numLi); }) ul.append(nextPageLi).append(lastPageLi); nav.append(ul); $("#nav_pagination_info").append(nav); } /** * 清除样式 */ function reset_form(ele){ $(ele)[0].reset(); //清空表单样式 $(ele).find("*").removeClass("has-error has-success"); $(ele).find(".help-block").text(""); } /** * 点击新增按钮，填写新增员工信息 * 新增之前需要清除样式 */ $("#emp_add_btn").click(function () { //清楚表单样式 reset_form("#Emp_Add_Modal form"); //1 获取部门信息，并显示在下拉框中 getDeptName("#deptName_select"); //2 显示模态框 $('#Emp_Add_Modal').modal({ backdrop:static, keyboard:true }); }); function getDeptName(ele) { $(ele).empty(); $.ajax({ url: "${APP_PATH}/dept/deptList", type: "GET", success: function (result) { console.log(result); //将信息显示到下拉列表中 $.each(result.extendInfo.depts,function () { var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId); optionEle.appendTo(ele); }); } }); } /** * 点击保存按钮，保存员工信息 */ $("#emp_save_btn").click(function () { //1 先校验 !validate_add_form()==true的时候说明校验有问题 if(!validate_add_form()){ return false; } //2 看用户名是否重复 if($("#empName").attr("empName_validate") == "error"){ return false; } //3 发送AJAX请求保存员工信息 $.ajax({ url:"${APP_PATH}/emp/save", type: "POST", data:$("#emp_add_form").serialize(), success: function (result) { if(result.code = 100){ alert("保存成功"); //1 关闭模态框 $("#Emp_Add_Modal").modal("hide"); //2、来到最后一页，显示刚才保存的数据 //发送ajax请求显示最后一页数据即可 to_page(totalRecord); } } }); }); /** * change:检测到输入框有改变后就会去验证用户名是否重复: */ //校验用户名是否重复 $("#empName").change(function () { var empName = this.value; $.ajax({ url: "${APP_PATH}/emp/checkUser", data:"empName="+ empName, type:"POST", success: function (result) { if(result.code == 100){ show_validate_msg("#empName", "success", "用户名可用"); $("#emp_save_btn").attr("empName_validate", "success"); }else { //显示后台验证的错误信息 show_validate_msg("#empName", "error", result.extendInfo.validate_error_msg); $("#emp_save_btn").attr("empName_validate", "error"); } } }); }); function show_validate_msg(ele, status, msg) { //清除当前元素的校验状态 $(ele).parent().removeClass("has-error has-success"); $(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); } } /** * 检验表格中输入的信息格式是否正确 */ function validate_add_form(){ //验证用户名 var empName = $("#empName").val(); var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5})/; if (!regName.test(empName)){ // alert("用户名可以是2-5位中文或者6-16位英文和数字的组合"); /* $("#empName").parent().addClass("has-error"); $("#empName").next("span").text("用户名可以是2-5位中文或者6-16位英文和数字的组合");*/ show_validate_msg("#empName", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合"); return false; }else{ show_validate_msg("#empName", "success", ""); /* $("#empName").parent().addClass("has-success");*/ } //验证邮箱 var email = $("#email").val(); var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/; if(!regEmail.test(email)){ //alert("邮箱格式不正确！"); /* $("#email").parent().addClass("has-error"); $("#email").next("span").text("邮箱格式不正确！");*/ show_validate_msg("#email", "error", "邮箱格式不正确！"); return false; }else{ /* $("#email").parent().addClass("has-success");*/ show_validate_msg("#email", "success", ""); } return true; } </script> </body> </html>