ajax验证码异步校验

偏执的太偏执、 2023-07-23 03:50 2阅读 0赞

这两日想完成这个功能

即一失焦就验证验证码

在网上找到一个大佬的

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

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>