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

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.mzph.cn/bicheng/2220.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

zkVM选型要点

1. 引言 当选择ZK工具&#xff0c;来做可验证链下计算来扩容区块链时&#xff0c;需考虑&#xff1a; 1&#xff09;为何应选择zkVM&#xff1f;2&#xff09;zkVM有哪些基本功能&#xff1f;3&#xff09;哪些zkVM可提供这些基本功能&#xff1f; 2. 为何应选择zkVM&#x…

大模型培训老师叶梓:通过微调提升小型语言模型的复杂推理能力

在人工智能的快速发展中&#xff0c;复杂推理能力的提升一直是研究者们追求的目标。最近&#xff0c;一项发表在arXiv上的研究成果【1】&#xff0c;提出了一种创新的方法&#xff0c;即通过微调小型语言模型&#xff08;LMs&#xff09;&#xff0c;并将其与大型语言模型&…

贪吃蛇游戏C语言破解:成为编程高手的必修课!

​ 个人主页&#xff1a;秋风起&#xff0c;再归来~ 文章专栏&#xff1a;C语言实战项目 个人格言&#xff1a;悟已往之不谏&#xff0c;知来者犹可追 克心守己&#xff0c;律己则安&#xff01; 1、游戏效果演示 贪吃蛇游戏效果演示 2、win32 A…

20240423给飞凌的OK3588-C开发板适配OV13855【绿屏】linux

20240423给飞凌的OK3588-C开发板适配OV13855【绿屏】 2024/4/22 20:29 开发板&#xff1a;飞凌的OK3588-C OS操作系统&#xff1a;linux R4/Buildroot 【OV13855接到CAM1上&#xff0c;如果要接到CAM2上请修改相关的DTS即可】 https://item.taobao.com/item.htm?_unju3ku2f4…

kerberos:适配华为FI

文章目录 一、hive1、hive thrift连接方式 一、hive 1、hive thrift连接方式 kerberos认证失败信息 缺少配置&#xff1a;{“hadoop.rpc.protection”:“privacy”}&#xff0c;具体可参考&#xff1a;kerbros认证相关问题 华为FI参考资料&#xff1a; https://github.com…

【MySQL 数据宝典】【磁盘结构】- 004 redolog 重做日志

一、背景介绍 持久性要求&#xff1a; 对于已提交的事务&#xff0c;即使系统发生崩溃&#xff0c;其对数据库的更改也不能丢失。问题&#xff1a; 在事务提交前将所有修改的页面刷新到磁盘浪费资源。随机IO导致刷新速度慢。 解决方案&#xff1a; 【数据副本】记录事务执行过…

linux信号机制分析

概念 信号递达&#xff1a;实际执行信号的处理动作就是信号递达 信号未决&#xff1a;信号从产生到递达之间的状态就是信号未决&#xff08;未决就是没有解决&#xff09; 收到某信号后&#xff0c;把未决信号集中的此信号置为1&#xff08;1表示未解决的信号&#xff09;&a…

【Camera Sensor Driver笔记】四、点亮指南之EEPROM配置

很久之前写的一版&#xff1a; 【Qcom Camera】微距eeprom调试_cam_vio-supply <&l7p>-CSDN博客 <slaveInfo> EEPROMName cat24c64_imx585 eeprom型_sensor名字 slaveAddress 0xa0 i2c write address regAddrType …

国产PLC有哪些,哪个牌子比较好用?

你知道国产PLC有哪些吗,哪个牌子更好用吗&#xff1f; 今天拿出国产先锋的汇川与台达对比&#xff0c;注&#xff1a;视频后方有各品牌学习资料免费送&#xff0c;需要的移步自取。话说回来&#xff0c;只要基于Codesys开发的都比较好用&#xff0c;只是使用底层芯片不同&…

国产软件不背黑锅:4款功能强大的黑科技软件,且用且珍惜

国内软件常被冠以“流氓软件、需要额外付费、广告繁多”等负面标签&#xff0c;但实际上&#xff0c;其中不乏一些小众却功能强大、用户体验极佳的软件。 布丁扫描——免费专业的扫描APP&#xff08;安卓、ios&#xff09; 布丁扫描&#xff0c;无疑是我今年的最爱&#xff0…

服务器还在长期泄密,保护数据IPSSL证书必不可少

IP SSL&#xff0c;或称为安全套接层协议&#xff08;Secure Sockets Layer&#xff09;&#xff0c;是一种用于在互联网上进行通信加密的技术标准&#xff0c;它通过为数据提供加密服务&#xff0c;确保了数据在传输过程中的安全与完整。其工作方式是在客户端和服务器之间建立…

你们项目日志是如何处理的???

ELK日志采集系统 1.什么是ELK ELK 是一套流行的数据搜索、分析和可视化解决方案&#xff0c;由三个开源项目组成&#xff0c;每个项目的首字母合起来形成了“ELK”这一术语&#xff1a; Elasticsearch (ES): Elasticsearch 是一个基于 Apache Lucene 构建的分布式、实时搜索与…

Java 字符

Java 字符 Java教程 - Java字符 在Java中&#xff0c;char存储字符。Java使用Unicode来表示字符。Unicode可以表示在所有人类语言中找到的所有字符。 Java char是16位类型。 字符的范围是 0 到 65,536 。没有负字符。 Char文字 Java中的字符是Unicode字符集的索引。字符表…

OpenHarmony实战开发-减小应用包大小。

简介 减小应用包大小是提升应用下载、安装体验的重要方式之一。通过压缩、精简或者复用应用中的代码或资源&#xff0c;可以有效降低应用的大小&#xff0c;提升应用下载和安装速度&#xff0c;减少系统空间占用。 开发者可以参考下面三种方法减小应用包大小&#xff1a; 配…

介绍TCP三次握手、传输数据、四次挥手标志为确认号变化规律

TCP协议的三次握手是一个关键过程&#xff0c;用于在客户端和服务器之间建立可靠的连接。以下是三次握手的详细过程&#xff0c;包括标志位、序列号以及ACK的变化规律&#xff1a; 第一次握手&#xff1a; 客户端&#xff1a; 标志位&#xff1a;SYN1&#xff08;表示请求建立…

【行为型模型】迭代器模式

一、迭代器模式概述 迭代器模式定义&#xff1a;提供一种方法顺序访问一个聚合对象中的各个元素&#xff0c;而又不暴露其内部的表示。把游走的任务放在送代器上&#xff0c;而不是聚合上。这样简化了聚含的接口和实现,也让责任各得其所。(对象行为型) 迭代器模式的优缺点&…

数据结构之顺序表的实现(C语言版)

Hello, 大家好&#xff0c;我是一代&#xff0c;今天给大家带来有关顺序表的有关知识 所属专栏&#xff1a;数据结构 创作不易&#xff0c;望得到各位佬们的互三呦 一.前言 1.首先在讲顺序表之前我们先来了解什么是数据结构 数据结构是由“数据”和“结构”两词组合⽽来。 什…

C语言—深度剖析函数指针,函数指针数组

我们先来看一段代码 #include <stdio.h> void test() {printf("hehe\n"); } int main() {printf("%p\n", test);printf("%p\n", &test);return 0; }输出的是两个地址&#xff0c;这两个地址是 test 函数的地址。 那我们的函数的地址…

Electron 30.0.0 发布,升级 Node 和 V8 引擎

近日&#xff0c;Electron 30.0.0 正式发布&#xff01;你可以通过 npm install electronlatest 进行安装&#xff0c;或者从 Electron 的发布网站下载&#xff0c;继续阅读了解此版本的详细信息。 &#x1f525; 主要更新 Windows 上支持 ASAR 完整性融合。如果未正确配置&am…

软件测试——Postman Script脚本功能

Postman作为软件测试里一款非常流行的调试工具&#xff0c;给我们提供了一个执行JavaScript脚本的环境&#xff0c;所以我们可以使用js语言编写脚本来解决一些接口自动化的问题&#xff0c;比如接口依赖、接口断言等等。Postman有Pre-RequestScript和Tests两个编写js脚本的模块…