前端开发攻略---实现发送手机验证码60s倒计时效果(手机号验证+按钮文字自定义显示+Vue2写法+Vue3写法)

news/2024/5/19 7:14:46

1、演示

2、说明

1、为了便于演示,本示例将在3秒后就再次发送。您可以根据需要自定义此时间间隔。

2、采用最少的变量以满足需求,以减少内存占用。

3、不仅仅局限于按钮情况,也可应用于不禁用按钮的情况,以实现更多的扩展性。

4、考虑到其他情形,以提高适用性。

5、代码简洁易懂,以促进代码的清晰度和易读性,适应更多人群。

3、Vue2写法

<template><div><input type="text" placeholder="请输入手机号" v-model="phone" /><button :disabled="code > 0" @click="sendInfo">{{ code > 0 ? code + 's' : '发送验证码' }}</button></div>
</template><script>
export default {data() {return {code: '',phone: '',}},methods: {sendInfo() {if (this.phone === '') return console.log('请输入手机号')if (!/^1[3-9]\d{9}$/.test(this.phone)) return console.log('手机号格式错误')// 如果不是按钮或者不想禁用按钮,需要加上以下判断if (this.code > 0) return console.log('验证码已发送,请等待')let timer = nullthis.code = 3timer = setInterval(() => {this.code--if (this.code == 0) {clearInterval(timer)}}, 1000)},},
}
</script><style scoped lang="scss"></style>

4、Vue3写法 

<template><div><input type="text" placeholder="请输入手机号" v-model="phone" /><button :disabled="code > 0" @click="sendInfo">{{ code > 0 ? code + 's' : '发送验证码' }}</button></div>
</template><script setup>
import { ref, reactive } from 'vue'
const code = ref(0)
const phone = ref('')
const sendInfo = () => {if (phone.value === '') return console.log('请输入手机号')if (!/^1[3-9]\d{9}$/.test(phone.value)) return console.log('手机号格式错误')// 如果不是按钮或者不想禁用按钮,需要加上以下判断if (code.value > 0) return console.log('验证码已发送,请等待')let timer = nullcode.value = 60timer = setInterval(() => {code.value--if (code.value == 0) {clearInterval(timer)}}, 1000)
}
</script>
<style scoped lang="scss"></style>

5、代码解析

1、if (this.phone === '') return console.log('请输入手机号'): 这一行检查是否输入了手机号码,如果没有输入,则打印出提示信息并退出函数。

2、if (!/^1[3-9]\d{9}$/.test(this.phone)) return console.log('手机号格式错误'): 这一行检查手机号码是否符合格式要求,如果不符合,则打印出格式错误的提示信息并退出函数。这里使用了正则表达式 /^1[3-9]\d{9}$/ 来验证手机号码是否以1开头,接着是3到9之间的数字,然后是9位数字。

3、if (this.code > 0) return console.log('验证码已发送,请等待'): 这一行检查是否已经发送了验证码,如果已经发送,则打印出提示信息并退出函数。

4、let timer = null: 这一行声明了一个变量 timer,用于存储定时器的标识符。

5、this.code = 3: 这一行将验证码的初始值设置为3,即表示验证码的倒计时初始值为3秒。

6、timer = setInterval(() => { ... }, 1000): 这一行启动一个定时器,每隔一秒执行一次定时器回调函数。

7、定时器回调函数内部,this.code-- 将验证码倒计时减1,然后检查是否倒计时结束,如果结束了,则清除定时器。

总的来说,这段代码用于验证手机号格式、检查是否已发送验证码,如果满足条件则启动一个3秒的倒计时,并在倒计时结束后清除定时器。


http://www.mrgr.cn/p/84851545

相关文章

【QT进阶】Qt Web混合编程之CMake VS2019编译并使用QCefView(图文并茂超详细版本)

往期回顾 【QT进阶】Qt Web混合编程之CEF、QCefView简单介绍-CSDN博客 【QT进阶】Qt Web混合编程之VS2019 CEF的编译与使用&#xff08;图文并茂超详细介绍&#xff09;-CSDN博客【QT进阶】Qt Web混合编程之QWebEngineView基本用法-CSDN博客【QT进阶】Qt Web混合编程之VS2019 C…

前端优化体积

个别js比较大,可以异步加载 如果是js文件,创建<script>后onload触发

HarmonyOS NEXT应用开发—城市选择案例

本示例介绍城市选择场景的使用:通过AlphabetIndexer实现首字母快速定位城市的索引条导航。介绍 本示例介绍城市选择场景的使用:通过AlphabetIndexer实现首字母快速定位城市的索引条导航。 效果图预览使用说明 分两个功能在搜索框中可以根据城市拼音模糊搜索出相近的城市,例如…

网卡-模式标准

目前主流的无线WIFI网络设备一共有以下几种模式:802.11a是一种Wi-Fi标准,工作在5GHz频段,提供最高54Mbps的数据传输速率。虽然速度较快,但覆盖范围较小。802.11b是Wi-Fi的最初标准之一,工作在2.4GHz频段,提供最高11Mbps的数据传输速率。虽然速度较慢,但拥有较广的覆盖范…

Visual Studio常用快捷键

常用快捷方式 快捷键 功能 Ctrl + K + C 注释选定内容 Ctrl + K + U 取消注释选定内容 Ctrl + K + D 代码格式整个文档内容 Ctrl + K + F 格式化选定内容 F12 转到定义 Ctrl+F12 转到声明 Ctrl + - 后退 Ctrl + Shift + - 前进 Ctrl + M + O 折叠…

菜鸟Java面向对象 2. Java 重写(Override)与重载(Overload)

Java 重写(Override)与重载(Overload) Java 重写与重载 Java 重写(Override)与重载(Overload)1. 重写(Override)1. 概念解释&#xff1a;2. 好处说明3. 异常规则处理 2. 方法的重写规则3. Super 关键字的使用4. 重载(Overload)**重载规则:**实例 5. 重写与重载之间的区别总结 1…

.pro文件管理qt项目,快捷设置软件名称和版本号

效果: .cpp文件代码:{ui->setupUi(this);// 设置软件名称和版本号QString version = QCoreApplication::applicationVersion();QString name = QCoreApplication::applicationName();QString verInfo = " 快捷设置软件名称和版本号 - 版本:V" + version+ QStr…

Python字符串过滤器:正则表达式Regular Expression

一、什么是正则表达式 正则表达式是按照正确的既定规则、一种全语言类型Python、Java、JavaScript、PHP通用的表达式。 用途: (1)根据规则抓取数据:配合爬虫、根据规则在文本中提取数据 (2)根据规则验证数据:验证手机号、验证邮箱、验证身份证 二、如何在Python中使用正…

node和go的列表转树形, 执行速度测试对比

保证数据一致性&#xff0c;先生成4000条json数据到本地&#xff0c;然后分别读取文本执行处理 node代码 node是用midway框架 forNum1:number 0forNum2:number 0//执行测试async index(){// 生成菜单列表// const menuList await this.generateMenuList([], 4000);const men…

优思学院|ISO45001职业健康安全管理体系是什么?

ISO45001:2018是新公布的国际标准规范&#xff0c;全球备受期待的职业健康与安全国际标准&#xff08;OH&S&#xff09;于2018年公布&#xff0c;并将在全球范围内改变工作场所实践。ISO45001将取代OHSAS18001&#xff0c;成为全球工作场所健康与安全的参考。 ISO45001:201…

# IDEA2019 如何打开 Run Dashboard 运行仪表面板

IDEA2019 如何打开 Run Dashboard 运行仪表面板 段子手168 1、依次点击 IDEA 上面工具栏 —> 【View】 视图。 —> 【Tool Windows】 工具。 —> 【Run Dashboard】 运行仪表面板。 2、如果 【Tool Windows 】工具包 没有 【Run Dashboard】 运行仪表面板 项 依次…

Hyperf - windows11 使用docker搭建hyperf框架

一、创建文件夹按自己习惯创建一个文件夹 D:\workspace二、创建docker容器并搭建Hyperf 1.创建Hyperf容器打开win+R 输入:PowerShell 进入命令页 docker run -d --name hyperf -v D:/workspace/skeleton:/hyperf-skeleton -p 9501:9501 -it --privileged -u root hyperf/hyper…

【Java】通过poi给word首页添加水印图片

背景&#xff1a; poi并没有提供直接插入水印图片的方法&#xff0c;目前需要再word的首页插入一张水印图片&#xff0c;于是就需要通过另一种方式&#xff0c;插入透明图片&#xff08;png格式&#xff09;并将图片设置为“浮于文字上方”的方式实现该需求。 所需jar&#xf…

2024/4/23

讨论:改了一些功能,今天的任务就是寻找出三大模块的场景图,搭建好场景,然后明天预计基本上完成场景的互动,然后就只差,搜集一些信息,以及通过手机号发送信息。 燃尽图:剩余70%

Web开发:ASP.NET CORE的前端demo(纯前端)

目录 一、建立项目 二、删除无用文件 三、样式添加 四、写一个登录页面 五、登录主界面 一、建立项目 二、删除无用文件 三、样式添加 将你的图片资源添加在wwwroot下方&#xff0c;例如pics/logo.png 四、写一个登录页面 将Privacy.cshtml改为 Forget.cshtml &#xff0…

已知二叉树的先序和后序求任意一中序

假设一个二叉树上所有结点的权值都互不相同。 我们可以通过后序遍历和中序遍历来确定唯一二叉树。 也可以通过前序遍历和中序遍历来确定唯一二叉树。 但是,如果只通过前序遍历和后序遍历,则有可能无法确定唯一二叉树。 现在,给定一组前序遍历和后序遍历,请你输出对应二叉树…

vue 表格获取当前行索引,加颜色

vue 表格获取当前行索引&#xff0c;加颜色 <span styledisplay:inline-block;width:10px;height:10px;border-radius:50% :style"{background:color[scope.$index]}" />//定义颜色color: [#5387F7, #A794E0, #F3543C, #999999, #77D3F8, #FFA1B4, #26CEBA, #…

【JavaEE多线程】线程中断 interrupt()

系列文章目录 &#x1f308;座右铭&#x1f308;&#xff1a;人的一生这么长、你凭什么用短短的几年去衡量自己的一生&#xff01; &#x1f495;个人主页:清灵白羽 漾情天殇_计算机底层原理,深度解析C,自顶向下看Java-CSDN博客 ❤️相关文章❤️&#xff1a;清灵白羽 漾情天…

ITMS-91053 Missing API declaration

热烈欢迎,请直接点击!!!进入博主App Store主页,下载使用各个作品!!!注:博主将坚持每月上线一个新app!!今天上传应用发现谈了一大堆警告,对于警告洁癖的我表示非常的震惊。基本上就是因为缺少隐私描述,但是我根本就没用第三方SDK啊,仔细一看发现是这两种: NSPriv…