这两日想完成这个功能
即一失焦就验证验证码
在网上找到一个大佬的
因为我想用我的样式,就对他的代码稍作改了改
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>