SSM练手-增删改查-5-新增_验证员工信息

新增员工信息的时候，点击保存的时候需要校验：

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">&times;</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("&laquo;"));
            //首页禁止点击，并且不显示数据
            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("&raquo;"));
            //末页禁止点击，并且不显示数据
            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>