首页 > 代码库 > 前端注册验证码校验

前端注册验证码校验

2024-08-04 23:50:40   212人阅读

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=http://www.mamicode.com/‘‘ 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="验证码验证不通过，请重新输入"

     }

}
 
 

 


前端注册验证码校验


联系
我们