1、 校验方式
输入后直接校验有好几种方式，之前一直再用的是onblur事件，当失去焦点是验证，但是注册码校验通常是最后一个表单输入，用户输入完直接点击提交，就会执行onblur事件，而不会执行提交事件，导致用户需要提交两次才能提交，用户体验感会相当差。现在替换成onkeyup事件，当用户的输入域中键入字符时，就立即触发事件。
2、 如下面代码一样
首先我们先定义一个flag状态 设置为false 和flag 提示内容。当我们触发事件时，我们使用document.getElementById(x).value获取输入值对其校验.在我们项目中，校验码的位数是5位，所以我们在事件中判断位数为5位数时才做校验，如果非5位数的输入时flag状态都设置为false。当我们提交表单时，我们会再一次去判断vcaptechStatus状态的值，如果为false时，我们就做出错误提示，提示的内容为vcaptechStr的值，并且不让去提交表单。
<input id="j_captcha_response" style="width:100px;margin-top: 8px;margin-left: 10px;" type="text" name="j_captcha_response" value=‘‘ onkeyup="verifyCaptcha()"> |
|
function verifyCaptcha(){ var vcaptechStatus=false; var vcaptechStr="验证码验证不通过，请重新输入" var t=document.getElementById("j_captcha_response").value; if(t.length==5){ $.ajax({ url : "${ctx }/Captcha.do?captcha", data : "id="+t, success : function(result) { if(result){ vcaptechStatus=success("#vcaptech",‘验证码正确‘); vcaptechStr=‘验证码正确‘; }else{ vcaptechStatus=error("#vcaptech",‘验证码输入错误‘); vcaptechStr=‘验证码输入错误‘; } } }); }else{ vcaptechStatus=false; $("#vcaptech").html(""); vcaptechStr="验证码验证不通过，请重新输入" } } |