Fork me on GitHub

获取短信验证码按钮的功能实现

发表于 | 分类于 |
字数统计 970 字 | 阅读时长 4 分钟

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

本文主要介绍了获取短信验证码按钮的前端实现和一些需要注意的地方。

简介

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

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

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

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

实现

按钮可以用以下两种获取验证码的实现方法:

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

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

一般验证码的页面HTML结构类似如下:

1
2
3
4
5
6
7
8
9
<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>

页面如图:

img

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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();
    })
})

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

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

注意事项

在实际开发中,除了上述的基本实现外，还需要有与服务器验证用户填写验证码是否正确的ajax请求, 使用cookie防止刷新页面导致倒计时失效的代码,实际开发的代码量会比上面多很多.

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

希望这篇文章对你有帮助.

----本文结束感谢阅读----