前端注册验证码校验

2019独角兽企业重金招聘Python工程师标准>>>

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="验证码验证不通过，请重新输入"      } }

 

转载于:https://my.oschina.net/u/1757458/blog/349919