记录开发中使用Bootstrapvalidator的threshold和remote使用技巧

背景

在使用maven架构SSM+shiro框架的开发过程中，页面使用bootstrapvalidator插件作为验证插件@varsion0.5.3，发现remote和threshold不是那么好用，到处百度、Google都没有很满意的结果，经过一番纠结之后终于解决问题了，在这里记录一下，以备以后查阅。

准备工作

    <!--bootstrap 3.4.1-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap/css/bootstrap.min.css">
	<!--    表单验证CSS-->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrapvalidator/bootstrapValidator.min.css">
-------------------------------------------------------------------------------------------------------------
	<!-- jQuery 1.12.4 需要jquery 1.9.1以上版本-->
	<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js"></script>
	<!-- Bootstrap 3.4.1 -->
	<script src="${pageContext.request.contextPath}/lib/bootstrap/js/bootstrap.min.js"></script>
	<!--    表单验证JSS-->
	<script type="text/javascript"
        src="${pageContext.request.contextPath}/lib/bootstrapvalidator/bootstrapValidator.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/lib/bootstrapvalidator/language/zh_CN.js"></script>

html页面

	<div class="form-group">
										<label>用户名</label>
										<input type="text" class="form-control" name="username" placeholder="请输入用户的登录名">
									</div>

JS代码

threshold

			<!--
				threshold必须和message、 validators同一级才会生效
			-->
	 			username: {
                    message: '用户名验证失败',
                    threshold: 2,
                    validators: {
                       ...省略代码
                }

remote

	 				notEmpty: {
                            message: '用户名不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        },
                        remote: {
                            url: '${pageContext.request.contextPath}/user/checkUserIsExist',
                            message: '用户名已存在,请重新输入',
                            type: 'GET',
                            delay: 1000
                        }
                    }

Controller实现

	 /**
     * 功能描述:
     * 返回String类型的结果
     * 检查用户名的合法性，如果用户已存在，返回false，否则返回true
     * 返回json数据，格式为{"valid",true}
     *
     * @Param: [username]
     * @Return: java.lang.String
     * @Author: cyikns
     * @Date: 2019/5/30 16:50
     */
    @RequestMapping(value = "/checkUserIsExist", produces = "application/json;charset=UTF-8")
    @RequiresPermissions("user:query")
    @ResponseBody
    public Map<String, Boolean> checkUserIsExist(String username) {

        HashMap<String, Boolean> map = new HashMap<>();
        try {
            if (!StringUtils.isEmpty(username)) {
                username = username.trim().toLowerCase();
                System.out.println(username);
            }
            User user = userService.findUserByUsername(username);
            System.out.println(user);

            if (user == null) {
                map.put("valid", true);
            } else {
                map.put("valid", false);
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
        return map;
    }

之前有试过这个资料介绍的方法，发现不来事，然后找到另外一份资料,发现OK，搞定，收工