Bootstrap-Validator验证插件/异常统一处理【宁泊云】

符鸣
2023-12-01

Bootstrap-Validator验证插件

在做web项目的时候,表单数据验证是再常见不过的需求了,友好的错误提示能增加用户体验,提高程序稳定性。

相关的文档

http://bootstrapvalidator.votintsev.ru/getting-started/

https://www.cnblogs.com/landeanfen/p/5035608.html

https://www.cnblogs.com/mzqworld/articles/9068430.html

  • 引入插件

    <!--引入验证插件的样式文件-->
    <link rel="stylesheet" href="/js/plugins/bootstrap-validator/css/bootstrapValidator.min.css"/>
    <!--引入验证插件的js文件-->
    <script type="text/javascript" src="/js/plugins/bootstrap-validator/js/bootstrapValidator.min.js"></script>
    <!--中文语言库-->
    <script type="text/javascript" src="/js/plugins/bootstrap-validator/js/language/zh_CN.js"></script>
    
  • 使用插件

    参考 \插件\bootstrap-validator\demo\index.html 案例文件,拷贝并进行修改

    $("#editForm").bootstrapValidator({
        feedbackIcons: { //图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{ //配置要验证的字段
            name:{
                validators:{ //验证的规则
                    notEmpty:{ //不能为空
                        message:"用户名必填" //错误时的提示信息
                    },
                    stringLength: { //字符串的长度范围
                        min: 1,
                        max: 5
                    }
                }
            },
            password:{
                validators:{
                    notEmpty:{ //不能为空
                        message:"密码必填" //错误时的提示信息
                    },
                }
            },
            repassword:{
                validators:{
                    notEmpty:{ //不能为空
                        message:"密码必填" //错误时的提示信息
                    },
                    identical: {//两个字段的值必须相同
                        field: 'password',
                        message: '两次输入的密码必须相同'
                    },
                }
            },
            email: {
                validators: {
                    emailAddress: {} //邮箱格式
                }
            },
            age:{
                validators: {
                    between: { //数字的范围
                        min: 18,
                        max: 60
                    }
                }
            }
        }
    }).on('success.form.bv', function() { //表单所有数据验证通过后执行里面的代码
    	//提交异步表单
        $("#editForm").ajaxSubmit(handlerMessage)
    });
    

验证用户名是否存在

  1. 前端

    	name:{
        validators:{ 
            remote: { //远程验证
                type: 'POST', //请求方式
                url: '/employee/checkName.do', //请求地址
                /*data: function() {  //自定义提交参数,默认只会提交当前用户名input的参数
                    return {
                        id: $('[name="id"]').val(),
                        name: $('[name="name"]').val()
                    };
                }*/
                message: '用户名已经存在', //验证不通过时的提示信息
                delay: 2000 //输入内容2秒后发请求
            }
        }
    },
    
  2. 后端

    插件要求返回结果需要为键值对形式 key为valid ,value为boolean类型

    valid : true 代表验证通过(该用户名不存在)

    valid:false 代表验证不通过(用户名已经存在)

    @RequestMapping("/checkName")
    @ResponseBody
    public Map<String,Boolean> checkName(String name){  // valid:true
        Employee employee = employeeService.selectByName(name);
        HashMap<String, Boolean> map = new HashMap<>();
        map.put("valid",employee==null);
        return map;
    }
    

统一异常处理

在 Java EE项目的开发中,不管是对底层的数据库操作过程,还是业务层的处理过程,还是控制层的处理过程,都难以避免遇到各种异常需要处理的问题。若不对异常进行处理的话,给用户看到异常信息是不好的,对不懂程序的用户来说还以为你的网站出问题了,对懂程序的人来说,看到你的异常信息,会显得很low,特别是sql出错,甚至还会暴露你的数据库字段。

如何解决

  • 手动try

    弊端是到处是重复代码,系统的代码耦合度高,工作量大且不好统一,维护的工作量也很大。

  • 利用 Spring MVC 的方式

    SpringMVC为Controller层的异常和数据校验的异常提供了全局统一处理 , 可以使用 @ExceptionHandler 配合 @ControllerAdvice 注解实现异常处理,可减少代码量,提高拓展性和可维护性

    添加处理控制器异常处理类,确保Spring配置中要能扫描到这个类

    针对不同异常进行不同处理,针对不同处理方法响应的内容, 进行不同处理,比如原来方法响应 HTML 依然响应 HTML,若原来方法响应 JSON 依然响应 JSON。

    /**
     * 对控制器进行增强
     * 利用aop
     *
     * @author 宁泊云
     */
    @ControllerAdvice
    public class ControllerExceptionHandler {
    
        /**
         * 当前方法用于捕获指定异常(RuntimeException)
         * HandlerMethod 出现异常的那个处理方法
         *
         * @param e             运行时异常
         * @param response
         * @param handlerMethod 获取出现异常的方法
         * @return 如果是ajax对应的方法,返回JsonResult,如果不是 就返回视图
         */
        @ExceptionHandler(RuntimeException.class)
        public Object handler(RuntimeException e, HttpServletResponse response, HandlerMethod handlerMethod) throws IOException {
            // 方便开发是找到bug
            e.printStackTrace();
            // 判断如果是ajax对应的方法,返回JsonResult
            if (handlerMethod.hasMethodAnnotation(ResponseBody.class)) {
                response.setContentType("application/json;charset=utf-8");
                response.getWriter().println(JSON.toJSONString(new JsonResult(false, "操作失败!")));
                return null;
            } else {
                // 如果不是 就返回视图
                return "common/error";
            }
        }
    }
    
 类似资料: