前端Vue实现手机号验证码登录（60s禁用倒计时）

这篇文章主要介绍了Vue实现手机号验证码登录（60s禁用倒计时），帮助大家更好的理解和使用vue，具有很好的参考价值，感兴趣的朋友可以了解下

最近做了个vue项目，前端通过手机号验证码的方式登录，获取验证码的按钮需要倒计时，点击一次之后，60秒内不能再次点击。先看效果图：

输入正确格式的手机号码后，“获取验证码” 按钮方可点击；点击“获取验证码”后，按钮进入60s倒计时，效果图如下：

效果图有了，接下来就是代码了：

<el-button @click="getCode()"  :disabled="getCodeBtnDisable">{{codeBtnWord}}</el-button>

data返回数据：

data() {return {loginForm: {phoneNumber: '',verificationCode: '',},codeBtnWord: '获取验证码', // 获取验证码按钮文字waitTime:60, // 获取验证码按钮失效时间getCodeBtnDisable: false,}
}

校验手机号是否正确

computed: {// 用于校验手机号码格式是否正确phoneNumberStyle(){let reg = /^1[3456789]\d{9}$/if(!reg.test(this.loginForm.phoneNumber)){return false}return true}
}

mothods中添加获取验证码方法

async sendCode () {try {let params = {}params.phone = this.loginForm.phoneNumberlet data = await axios.post('/sendMessage',params)this.$message.success('验证码发送成功')let that = thisthat.waitTime--that.getCodeBtnDisable = truethis.codeBtnWord = `${this.waitTime}s 后重新发送`let timer = setInterval(function () {if (that.waitTime > 1) {that.waitTime--that.codeBtnWord = `${that.waitTime}s 后重新发送`} else {clearInterval(timer)that.codeBtnWord = '获取验证码'that.getCodeBtnDisable = falsethat.waitTime = 60}}, 1000)} catch (res) {console.log(res)}},

以上就是Vue实现手机号验证码登录（60s禁用倒计时）的详细内容，如有错误请指出！

前端Vue实现手机号验证码登录（60s禁用倒计时）相关推荐

手机号验证码登录的思路
引言当前很多web端的应用登录方式主要分为以下几种: 账号密码登录手机号验证码登录扫码登录这里我主要说一下我对于手机号验证码登录的思路,如果有遗漏或者差错的地方,请指正: 整体流程大致流程如 ...
spring oauth2 实现用户名密码登录、手机号验证码登录返回token
文章目录介绍实现功能用户名密码登录步骤编写成功处理器配置成功处理器手机号验证码登录步骤重写SmsCodeAuthenticationSecurityConfig 测试用户名密码登录 ...
小程序手机号验证码登录
这是我最近的一个项目--微信小程序实现手机号- -验证码登录,涉及到了提交参数时需要加密.加密所采用的方式也是按照要求,严格采用16位小加密的MD5的加密形式. login.wxml <vie ...
测试案例：登录--手机号验证码登录
手机号验证码登录测试点 1.输入手机号码,待收到手机验证码后,输入验证码 ,成功 2.输入手机号码,待收到手机验证码后,输入错误的验证码,提示:失败 3.输入手机号码,待收到手机验证码后,更改原来手机 ...
阿里云账户使用手机号+验证码登录开启方法、
阿里云账号登录支持手机号验证码登录方式,但是如果是2022.4.1前注册的账号,需要先在账号中心开启手机号登录,才可以使用手机号登录.阿里云百科来详细说下阿里云账号开启手机号登录的方法: 阿里云账号手 ...
keycloak单点登录（浙政钉2.0扫码、手机号验证码登录）
写在前面:本篇博客只针对前端代码实现,keycloak配置什么的,自己和后端或者运维联调吧.说实在的,因为不熟悉keycloak代码的逻辑,再加上时间紧,所以搞了一些很多骚操作. 登录这些前端代码是写 ...
Uni-app 手机号+验证码登录用户名密码登录登出
用户名密码登录,手机号登录用户名密码登录:用了uniapp+uview的$u.debounce防抖方法,再发送请求判断正则以及同意条款勾选后,发起登录请求(参数是用户名和密码),如果请求成功--s ...
【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面，路由式开发（附完整代码）
目录效果图: 一.template部分二.style样式三.script部分 1.先对手机号的格式进行一个判断 2.接下来就是表单验证规则rules 3.最后就是methods了 (1)首先我们 ...
Vue - 实现获取手机验证码倒计时 60 秒（手机号+验证码登录功能）
前言网上的大部分获取验证码逻辑的例子,代码多还不健壮,本文将用最少的代码实现相同的功能. 当点击获取验证码按钮时,会自动进入倒计时,同时按钮无法点击, 您可以自定义倒计时时间,如下图所示: 这块由于 ...

前端Vue实现手机号验证码登录（60s禁用倒计时）

前端Vue实现手机号验证码登录（60s禁用倒计时）相关推荐

最新文章

热门文章