获取手机验证码按钮的效果实现

在web网页中,用户的一些行为,例如注册,登陆,付款,修改密码等,都须要网站经过手机验证码来确认其行为身份,从而保证用户帐户和网站自身的安全.

一.简介

网页中的验证码通常都是采用点击获取的方式,在实现页面的获取手机验证码按钮时,着重须要考虑的是如下几点:

• 保证在手机号码填写符合规范的状况下才能够点击按钮或者发送请求
• 点击按钮后须要在一段时间内禁用按钮,以防止用户不断点击产生大量请求
• 保证在网页刷新后验证码计时不会清零

在这里咱们主要来实现前两项效果.

保证网页刷新后验证码倒计时不清零须要使用cookie实现,为了不篇幅过长,内容杂乱,不作赘述.

二.实现

按钮能够用如下两种获取验证码的实现方法:

1. 当手机号输入格式正确时,按钮才处于可点击状态
2. 按钮一直处于可点击状态,只是当手机号格式错误时,点击后会向用户提示错误,不向服务器发送请求

这两种方法虽然代码可能不一样,可是基本原理是差很少的,这里咱们就只使用第一种方法来进行说明.

通常验证码的页面HTML结构相似以下:

 

<div>
   <p >请输入手机号:</p>
   <input class="phone" type="number">
   <p>验证码:</p>
   <input type="number" name="" id="">
   <input type="button" value="获取验证码" name="yzm" class="yzm" disabled="disabled">
   <br><br>
   <input type="submit" value="提交">
 </div>

 

 

 

页面如图:

在输入正确格式的手机号码后,获取验证码按钮取消禁用状态,可点击.

点击后按钮再次进入禁用状态并开始倒计时,倒计时完毕后再次进入可点击状态.

具体实现流程仍是比较简单的.代码以下:

$(document).ready(function(){
    var ordertime=20   //设置再次发送验证码等待时间
    var timeleft=ordertime
    var btn=$(".yzm")
    var phone=$(".phone")
    var reg = /^1[0-9]{10}$/;  //电话号码的正则匹配式

    phone.keyup(function(){
      if (reg.test(phone.val())){
        btn.removeAttr("disabled")  //当号码符合规则后发送验证码按钮可点击
        }
      else{
        btn.attr("disabled",true)
      }
    })

    //计时函数
    function timeCount(){
       timeleft-=1
       if (timeleft>0){
       btn.val(timeleft+" 秒后重发");
       setTimeout(timeCount,1000)
       }
       else {
        btn.val("从新发送");
        timeleft=ordertime   //重置等待时间
        btn.removeAttr("disabled");
       }
     }

    //事件处理函数
    btn.on("click",function(){
        $(this).attr("disabled",true); //防止屡次点击
        //此处可添加 ajax请求 向后台发送 获取验证码请求
        timeCount(this);
        })

      })

 

 

ajax请求格式大概以下,能够用于向服务器请求发送验证码到制定手机

$.ajax({
     　　type: "POST", //用POST方式传输
     　　dataType: "text", //数据格式:JSON
     　　url: 'Login.ashx', //目标地址
    　　 data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code, //post携带数据
    　　 error: function () { }, //请求错误时的处理函数
     　　success: function (){ }, //请求成功时执行的函数
        });

 

另外在实际开发中,还须要有与服务器验证用户填写验证码是否正确的ajax请求等,再加上使用cookie防止刷新页面致使倒计时失效的代码,实际开发的代码量会比上面多不少.

可是只要咱们掌握基本原理和实现思路,就能够很容易的实现项目要求.

但愿这篇文章对你有帮助.