SSM:九、信息校验：jQuery前端校验、ajax用户名重复校验、后端校验

jQuery前端校验

用正则表达式对前端输入信息的校验。包括用户名信息和email信息。
具体的实现就是利用正则表达式判断所输入的信息是否符合要求。而后添加样式。

        //校验员工姓名和邮箱的格式是否正确
        function invalid_form() {
            var empName = $('#add_emp_Name').val();
            //正则表达式-->6-16位英文以及数字组成或者2-5位中文组成
            var regName = /(^[a-z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            //判断是否相同,如果不相同提示
            if(!regName.test(empName)) {
                show_invalid('#add_emp_Name','error','姓名由6-16位英文以及数字组成或者2-5位中文组成');
                //  alert("格式不正确")
                return false;
            }else{
                show_invalid('#add_emp_Name','success','')
            };
            //测试邮箱的格式
            var empEmail = $('#add_emp_Email').val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(empEmail)) {
                show_invalid('#add_emp_Email','error','邮箱格式不正确！');
                return false;
            }else{
                show_invalid('#add_emp_Email','success','')
            }
            return true;
        }

        //显示校验的信息的样式
        function show_invalid(id,status,info) {
            //当需要检验的时候，清空校验所在的css样式
            $(id).parent().removeClass('has-error has-success')
            if('error' == status) {
                $(id).parent().addClass('has-error');
                $(id).next("span").text(info);
            }else if('success' == status) {
                $(id).parent().addClass('has-success');
                $(id).next("span").text(info);
            }
        }

ajax用户名重复校验

利用从后端从数据库获取数据，后发出的用户名请求转为ajax请求，从服务器获取解析的json数据，交由前端的js层操作显示，来判断用户名是否重复。
Controller层

 //判断用户名是否在数据库中可用
    @RequestMapping("/checkUser")
    @ResponseBody
    public Msg checkUser(@RequestParam("empName") String empName) {

        //正则表达式校验，与前端校验一致。
        String regex = "^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$";
        //判断用户名与正则表达式进行校验，返回boolean值
        //返回失败 --> false
        if(!empName.matches(regex)) {
            //返回一条提示信息。
            return Msg.fail().add("regex_msg","必须是英文与数字的组合或者为中文！");
        }
        //数据库校验
        Boolean b = employeeService.checkUser(empName);
        if(b) {
            //如果为true，就说明可用，返回一条成功的信息
            return Msg.success();
        }else{
            //如果false，就说明不可用，返回一条失败的信息
            return Msg.fail().add("regex_msg","用户名不可用！");
        }
    }

js的ajax方法

//添加从后端传入的ajax请求
        $('#add_emp_Name').change(function () {
            //得到当前输入的值,将其传入后端服务器进行校验
            var empName = this.value;
            //发送ajax请求检验用户名在数据库是否可用。
                $.ajax({
                    url:'${APP_PATH}/checkUser',
                    data:"empName=" +empName,
                    type:"POST",
                    success:function (result) {
                        if(result.code == 100) {
                            show_invalid('#add_emp_Name','success','用户名可用');
                            //给保存按钮添加自定义的属性，而后交给保存按钮的ajax进行判断
                            $('#add_button').attr('ajax-validate','success');
                        }else {
                            show_invalid('#add_emp_Name','error',result.extend.regex_msg);
                            $('#add_button').attr('ajax-validate','error');
                        }
                    }
                })
        })

后端校验

使用hibernate-validator包下的校验数据的插件，里面使用JSR303数据校验支持对数据进行校验
Employee类，给要校验的属性添加以下几个注解

     @Pattern(regexp = "^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",
            message = "姓名由6-16位英文以及数字组成或者2-5位中文组成!")
    private String empName;
     @Pattern(regexp = "^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",
     		message = "邮箱格式不正确!")
    private String email;

在Controller层加上以下代码，返回错误信息

 //增加员工
    @RequestMapping(value = "/emp",method = RequestMethod.POST)
    @ResponseBody
    public Msg addEmp(@Valid Employee employee, BindingResult result) {
        //判断返回的信息是否有错
        if(result.hasErrors()) {
            //检验失败，返回错误信息，在模态框中显示错误信息。
            //将错误信息封装在一个Map集合中。
            Map<String,Object> map = new HashMap<>();
            List<FieldError> errors = result.getFieldErrors();
            //遍历错误信息
            for(FieldError fieldError : errors) {
                System.out.println("错误信息的id为" + fieldError.getField());
                System.out.println("错误信息为" + fieldError.getDefaultMessage());
                //将id，message封装进Map集合中。
                map.put(fieldError.getField(),fieldError.getDefaultMessage());
            }
            //将map集合添加进extend里面，在前端页面取出显示
            return Msg.fail().add("ErrorField",map);
        }else {
            employeeService.addEmp(employee);
            return Msg.success();
        }
    }

在js层进行渲染

$('#add_button').click(function () {
        //在数据提交给服务器前对输入的数据格式进行校验
        if(!invalid_form()) {
            //如果invalid_form()方法没有返回true，就返回false
            return false;
        }
        //对后端的返回的ajax校验进行判断
        //从当前的按钮中得到属性值，进行判断,如果检验不通过，就return false，不往下进行。
        if($(this).attr('ajax-validate') == 'error') {
            return false;
        }
        //对json数据序列化
         //console.log($('#myModal form').serialize());
        //用ajax对增加的数据进行解析
        $.ajax({
            url:"${APP_PATH}/emp",
            type:"POST",
            data:$('#myModal form').serialize(),
            success:function (result) {
                //处理成功后完成以下需求：
                //判断是否处理正常,如果正常就执行以下操作
                if(result.code == 100) {
                    //1、关闭静态模块框
                    $('#myModal').modal('hide');
                    //2、页面转向最后一条插入数据的页面
                    //将总记录数传入，只要比全部页数大就转到最后一页。
                    to_Page(total_page);
                }else {
                    //检验未完成
                    //有那个字段有错误就显示那个错误
                    if(undefined == result.extend.ErrorField.email) {
                        show_invalid('#add_emp_Email','error',result.extend.ErrorField.email);
                    }
                    else if (undefined == result.extend.ErrorField.empName) {
                        show_invalid('#add_emp_Name','error',result.extend.ErrorField.empName);
                    }
                }
            }
        });
    })