ajax验证码异步校验

这两日想完成这个功能

即一失焦就验证验证码

在网上找到一个大佬的

因为我想用我的样式，就对他的代码稍作改了改

ajax的代码

$("#checkCodeId").blur(function () {
        if($("#checkCodeId").val().length!=0) {//验证码不为空
            //ajax实现验证码异步校验，失焦即开始比对验证码，防止出现因验证码错误，导致其他已填的内容都清空
            //用户输入的验证码
            var checkCode_client=$("#checkCodeId").val();
            //系统生成的验证码
            $.ajax({
                async:true,
                url:"/checkCode/registerCheckCode",
                data:{"checkCode_client":checkCode_client},
                type:"post",
                scriptCharset: "utf-8",
                dataType:'json',
                success:function (data) {//用户输入的验证码和系统验证码一致
                    if(data.info=="true"){
                        //验证码正确的样式
                        trueCheckCode.style.display = 'block';
                        checkCodeId.className='form-control form-control-sm is-valid';
                    }else{
                        //验证码错误的样式
                        falseCheckCodeSame.style.display='block';
                        falseCheckCode.style.display = 'none';
                        checkCodeId.className='form-control form-control-sm is-invalid';
                    }
                },
                error:function (data) {//出现异常
                    alert("出现异常");
                }
            });
        }else{//验证码为空
            falseCheckCodeSame.style.display='none';
            falseCheckCode.style.display = 'block';//输入的验证码不能为空
            checkCodeId.className='form-control form-control-sm is-invalid';
        }
    });

controller的代码

/**
     * 注册页面的验证码校验
     * @param response
     * @param session
     */
    @RequestMapping("/registerCheckCode")
    public void RegisterCheckCode(HttpServletRequest request,HttpServletResponse response,HttpSession session) throws IOException {

        //用户输入的验证码
        String checkCode_client = request.getParameter("checkCode_client");
        //系统生成的验证码
        String code = session.getAttribute("code").toString();

        if(!checkCode_client.equalsIgnoreCase(code)){
            response.getWriter().write("{ \"info\" : \"wrong\" }");//用户输入的验证码和系统生成的验证码不一致
        }else{
            response.getWriter().write("{ \"info\" : \"true\" }");//一致
        }
    }

html的代码

<%--输入验证码的框--%>
<div class="form-group" style="float: left;margin-bottom:0.25rem ">
    <input type="text" id="checkCodeId" name="checkCode" class="form-control form-control-sm" style="width: 210px" placeholder="请输入验证码">
</div>
<%--生成验证码图片的controller--%>
<div style="float: right">
    <img src="/checkCode/createCode" id="checkCodePic" style="height: 36px;width: auto">
</div>
<%--这三个样式默认就是不显示的，display: none;他们的显示我是通过后台js进行控制--%>
<small id="trueCheckCode" class="valid-feedback">验证码正确</small>
<small id="falseCheckCodeSame" class="invalid-feedback">输入的验证码错误</small>
<small id="falseCheckCode" class="invalid-feedback">输入的验证码不能为空</small>