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

1 为什么要使用JSR303？

1) 前端的jQuery校验;

调用此函数的时候，容易被人而已篡改，使其跳过此验证，或者即使错误也会强制变为success。

所以需要在后台进行验证。

2) 后台Ajax验证用户名重复的时候，也对用户名格式进行了判断：

但是这样判断比较麻烦。

3)JSR303校验：

所以需要JSR303校验。

2 具体做法

1) 引入需要的依赖jar包：

    <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-validator -->
    <dependency>
      <groupId>org.hibernate</groupId>
      <artifactId>hibernate-validator</artifactId>
      <version>5.1.3.Final</version>
    </dependency>

2) 实体类属性上加入格式限制：

@Pattern(regexp = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})",
            message = "后台JSR303:用户名必须是2-5位中文或者6-16位英文和数字的组合")
    private String empName;


    @Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",
            message="后台JSR303: 邮箱格式不正确")
    private String eamil;

3）修改保存员工借口，加入JSR303的校验，并且将错误信息返回到前端AJAX请求的回调函数中进行显示：

   /**
     * 新增员工信息
     * 更新：加入JSR303校验存储的员工信息
     * @param employee
     * @return
     */
    @RequestMapping(value = {"/emp/save"}, method = {RequestMethod.POST})
    @ResponseBody
    public Msg addEmp(@Valid Employee employee, BindingResult result){

        if (result.hasErrors()){
            Map<String, Object> map = new HashMap<>();
            List<FieldError> errors = result.getFieldErrors();
            for (FieldError error : errors){
                System.out.println("错误信息字段名：" + error.getField() );
                System.out.println("错误信息：" + error.getDefaultMessage() );
                map.put(error.getField(), error.getDefaultMessage());
            }
            return Msg.fail().add("errorFields", map);
        } else {
            employeeService.saveEmp(employee);
            return Msg.success();
        }
    }

4) Ajax请求回调，判断，如果有错误信息的时候就进行显示：

   /**
         * 点击保存按钮，保存员工信息
         */
        $("#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);
                    }else {
                        console.log(result);
                        //显示错误信息 !=undifned 即不为空，表示有错
                        if (undefined != result.extendInfo.errorFields.eamil){
                            show_validate_msg("#email", "error", result.extendInfo.errorFields.eamil)
                        }
                        if (undefined != result.extendInfo.errorFields.empName){
                            show_validate_msg("#empName", "error", result.extendInfo.errorFields.empName);
                        }
                    }

                }
            });
        });

验证的时候可以将第一步去掉，返回结果如下：

完整代码如下：

<%@ 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);
                    }else {
                        console.log(result);
                        //显示错误信息 !=undifned 即不为空，表示有错
                        if (undefined != result.extendInfo.errorFields.eamil){
                            show_validate_msg("#email", "error", result.extendInfo.errorFields.eamil)
                        }
                        if (undefined != result.extendInfo.errorFields.empName){
                            show_validate_msg("#empName", "error", result.extendInfo.errorFields.empName);
                        }
                    }

                }
            });
        });

        /**
         * 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>

posted on 2017-06-12 14:54 noaman_wgs 阅读(504) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

noaman_wgs

公告