注册验证码校验-立即校验

注册验证码校验

1、     校验方式

输入后直接校验有好几种方式，之前一直再用的是onblur事件，当失去焦点是验证，但是注册码校验通常是最后一个表单输入，用户输入完直接点击提交，就会执行onblur事件，而不会执行提交事件，导致用户需要提交两次才能提交，用户体验感会相当差。现在替换成onkeyup事件，当用户的输入域中键入字符时，就立即触发事件。

2、     如下面代码一样

首先我们先定义一个flag状态 设置为false 和flag 提示内容。当我们触发事件时，我们使用document.getElementById(x).value获取输入值对其校验.在我们项目中，校验码的位数是5位，所以我们在事件中判断位数为5位数时才做校验，如果非5位数的输入时flag状态都设置为false。当我们提交表单时，我们会再一次去判断vcaptechStatus状态的值，如果为false时，我们就做出错误提示，提示的内容为vcaptechStr的值，并且不让去提交表单。

Html:

<input id="captcha" type="text" name="captcha"οnkeyup="verifyCaptcha()"> <p id="captech">验证码提示</p>

Javascript:

function verifyCaptcha(){ var captechStatus=false; var captechStr="验证码验证不通过，请重新输入"  var t=document.getElementById("captcha").value;      if(t.length==5){           $.ajax({               url : "",               data : "code="+t,               success : function(result) {                   if(result){ captechStr='验证码正确';                      captechStatus=success("#captech", captechStr);                   }else{ captechStr='验证码输入错误';                        captechStatus=error("#captech", captechStr);                  }            }            });       }else{         captechStatus=false;         $("#captech").html("");         captechStr="验证码验证不通过，请重新输入"      } }     function success(id,content){        $(id).css("color", "#008F00");        content="<img src='/image/true.png'>"+content        $(id).html(content);        return true;     }         function error(id,content){        $(id).css("color", "#FF0000");        content="<img src='/image/false.png'>"+content        $(id).html(content);        return false;         }