Bootstrap-Validator验证插件

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

相关的文档：

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

https://www.geek-share.com/detail/2660738603.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";
  }
  }
  }