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

一.简介

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

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

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

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

二.实现

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

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

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

一般验证码的页面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=ordertimevar 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-=1if (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", //数据格式:JSONurl: 'Login.ashx', //目标地址data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code, //post携带数据error: function () { }, //请求错误时的处理函数success: function (){ }, //请求成功时执行的函数});

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

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

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

转载于:https://www.cnblogs.com/afei-qwerty/p/6856634.html

获取手机验证码按钮的效果实现相关推荐

jquery获取手机验证码按钮计时插件getVerifyCode.js
在我们一个项目切图中,碰到一个效果是点击发送验证码,然后按钮的文字变成"还有xx秒后重试" 这样的效果,想必如果你是一名设计师,你应该也这样设计过,但是前端要如何实现? 碰到这个问 ...
vue获取手机验证码60秒倒计时，不能点击按钮
vue获取手机验证码60秒倒计时,不能点击按钮 export const resend = element => {console.log(element)var num = 60var tim ...
注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）
注册/找回密码等功能中发送手机验证码后倒计时效果的实现,基于vue.element-ui <template><el-button size="small" ty ...
2022.9.17 vue、element-ui实现登录获取手机验证码，进行手机号校验、验证码CD60秒
一.实现效果: 1.直接点击,不为空校验 2.输入手机号格式不正确时 3.获取完验证码进行读秒二.页面html <el-formclass="phone-form"ref= ...
android获取手机验证码界面以及倒计时实现demo，移动端应用开发试题
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', ...
获取手机验证码获取普通验证码
HTML <body><div class="wraper"><h1>获取手机验证码</h1><input id=" ...
如何封装一个vue组件（获取手机验证码的组件）
如何封装一个vue组件(获取手机验证码的组件) 定义一个名为 item-time 的新组件,这是获取手机验证码的组件 Vue.component('item-time', {props: ['maxt ...
获取手机验证码——Vant表单验证/后端框架express/前后端交互
完成一个获取手机验证码的功能,在获取之前要对手机号进行表单验证,判断是否输入/输入的是否为正确格式,获取手机验证码后可等待n秒重新获取,代码如下: <template><div cl ...
获取手机验证码倒计时功能
倒计时: 例如:登录页面获取手机验证码登录代码: /* text:'获取验证码' => 按钮的初始展示样式是获取验证码 disabled:false, => 是否禁用按钮防止用户在短时 ...

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

一.简介

二.实现

获取手机验证码按钮的效果实现相关推荐

最新文章

热门文章