vue实现短信验证功能

最新推荐文章于 2024-03-18 17:57:48 发布
最新推荐文章于 2024-03-18 17:57:48 发布
阅读量5.4k 收藏 10
点赞数
分类专栏： 技术交流 传智播客西安中心
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39581763/article/details/81739428
版权

平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候,

1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击

2.当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按钮又可以重新点击了

为了解决上面的两个问题,就需要把时间都写到localstorage里面去,当打开页面的时候,就去localstorage里面去取,我这里就贴上我的解决方法,因为前几天有个vue的项目用到该方法,所以我这里就写个vue的方法出来吧

组件里面的html代码:

<div class="mtui-cell__ft" @click="getCode">

          <button class="mtui-vcode-btn mtui-text-center" v-if="flag">获取短信</button>
最低0.47元/天 解锁文章
渐暖吧
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
基于Vue的验证码实现
游王子的博客
05-19 383
其中icon_light.png图标图片如下，其他img.jpg图片可以是任意图片。
vue3中运用组件写成获取验证码，并实现手机可以接收到验证码事例
B13362260109的博客
07-21 482
在上述代码中，我们使用了 axios 库来发送 POST 请求到 /api/send_code 接口，并传递了用户输入的手机号码。例如，我们可以创建一个短信签名为“我的应用”，短信模板为“验证码为${code}，5分钟内有效”（其中 ${code} 是一个可变参数），然后将其审核通过。在本文中，我们介绍了如何利用 Vue3 组件来实现获取验证码，并让用户的手机接收到验证码的功能。我们将创建一个名为 VerificationCode 的 Vue3 组件，该组件可以获取用户输入的手机号码并向其发送验证码。
前端Vue自定义发送短信验证码弹框popup 实现剩余秒数计数 重发短信验证码
chenchuang0128的博客
06-27 667
清空重新发送
vue3实现输入框短信验证码功能
最新发布
qq_42259940的博客
03-18 681
1.按键删除，清空当前input，并跳转prevInput & 获取焦点,按键delete，清空当前input，并跳转nextInput & 获取焦点。按键Home/End键，焦点跳转first/最后一个input输入框。ArrowLeft/ArrowRight键点击后跳转上一个/下一个输入框获取焦点。通过el.clipboardData获取粘贴内容，判断是否为4/6位粘贴内容。2.判断按键为数字，则取第一个数字，然后跳转下一个input输入框获取焦点，如果为最后一个，则失去焦点，交互结束。
使用VUE分分钟写一个验证码输入组件
weixin_34327223的博客
12-14 925
效果 先来看波完成效果图 预览地址 github地址 npm地址 需求 输入4位或6位短信验证码，输入完成后收起键盘 实现步骤 第一步 布局排版 <div class="security-code-wrap"> <label for="code"> <ul class="security-code-container"> &...
vue实现短信验证码登录功能（流程详解）
10-15
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能，输入手机号，得到验证码，这篇文章主要介绍了基于vue实现短信验证码登录功能,需要的朋友可以参考下
使用Vue 实现滑动验证码功能
10-16
本文章主要来介绍一下第一个阶段，也就是前端校验的验证码的实现，下面来介绍一下拖动验证码的具体实现。这篇文章主要介绍了利用 Vue 实现滑动验证码,需要的朋友可以参考下
vue 实现通过手机发送短信验证码注册功能
01-21
效果如下： 代码如下： template代码： ref=ReginForm rules=rule class=regform label-width=0> 手机注册 <el-input type=text v-model.number=ReginForm.tel placeholder=手机号码
Vue.js实现移动端短信验证码功能
10-20
在本文中，我们将深入探讨如何使用Vue.js框架来实现移动端的短信验证码功能。这个功能通常用于用户注册或登录过程，以验证用户手机号码的有效性，提高安全性。在移动端，短信验证码通常由4位或6位数字组成，用户需...
VUE组件封装之短信验证码组件
沉默的小猴子的博客
10-19 918
贴上代码， <template> <div> <msg-code v-model="smsPwd" :msgTitle="'验证码'" :disabled="false" :placeholder="placeholder" :maxlength="'6'" :text=.
vue发送短信验证码60秒后点击重发
爱意迷了眼丶的博客
05-08 238
vue-发送短信验证码60秒后点击重发
Vue 短信验证码组件开发详解
weixin_34146410的博客
02-10 257
为什么80%的码农都做不了架构师？>>> ...
vue实现动态验证码和短信验证码
热门推荐
wangle_style的博客
05-25 1万+
一：动态验证码：html部分&lt;div style="display: flex;align-items: center;"&gt;                    &lt;span&gt;验证码：&lt;/span&gt;                    &lt;i-input v-model="picLyanzhengma" placeholder="请输入验证码" sty
vue获取（短信or邮箱）验证码组件
weixin_41421227的博客
11-14 2165
&lt;template&gt;     &lt;button          :style="config.cssSet?config.cssSet:''"          class="common-getCodeBtn"          @click="togetCode"         :disabled="isGetting"         &gt;{{ message?mes
vue 获取短信验证码
M_SSY的博客
04-17 1861
<!-- 获取验证码倒计时60s --> <div class="input-div"> <button @click="getCode(formData)" class="code-btn" :disabled="!show"> <s...
vue实现短信验证码登录
记得我所记得的
07-29 3541
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能，输入手机号，得到验证码，最后先服务器发送请求，保存登录的信息，一个必不可少的功能 思路 1，先判断手机号和验证是否为空， 2，点击发送验证码，得到验证码 3，输入的验证码是否为空和是否正确， 4，最后向服务发送请求 界面展示 1.准备工作 这个会对input进行封装处理 <templ...
用VUE实现注册页（短信验证码登录）
qq_62449212的博客
11-21 9812
移动端手机验证码注册
vue中手机号，邮箱正则验证以及60s发送验证码
大熊的博客
01-31 7664
今天写了一个简单的验证，本来前面用的组件，但是感觉写的组件在此项目不是很好用，由于用到的地方比较少，所以直接写在了页面中。页面展示如图 class="fl"> "phone" type="number" placeholder="手机号" v-model="phone"/> type="button" :disabled="disabled" @cl
springboot vue实现手机短信登陆
09-09
Spring Boot和Vue可以很好地配合实现手机短信登录功能。下面是大致的实现步骤： 1. 后端实现： - 使用Spring Boot框架搭建后端服务器。 - 引入相关的依赖，如Spring Boot Starter Web、Spring Boot Starter ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值