前端开发攻略---实现发送手机验证码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://xiahunao.cn/news/2979222.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

FPGA组合逻辑电路设计之译码器

在数字电路中可以根据电路功能的不同分为&#xff0c;组合逻辑电路与时序逻辑电路。组合逻辑 电路在逻辑功能上的特点是任意时刻的输出仅仅取决于该时刻的输入&#xff0c;与电路原来的状态无 关。而时序逻辑从电路特征上看来&#xff0c;其特点为任意时刻的输出不仅取决于该…

安卓NetworkStatsManager使用及demo

目录 一、TrafficStats类简介二、demo示例 一、TrafficStats类简介 TrafficStats Android API 8提供了android.net.TrafficStats类。 通过此类能获取设备重启以来网络信息&#xff0c;部分函数如下所示&#xff1a; static long getMobileRxBytes() //获取通过移动数据网络…

【SpringBoot】-MyBatis详解+单表操作

作者&#xff1a;学Java的冬瓜 博客主页&#xff1a;☀冬瓜的主页&#x1f319; 专栏&#xff1a;【Framework】 主要内容&#xff1a;什么是MyBatis框架&#xff1f;MyBatis框架有什么用&#xff1f;MyBatis实现查询步骤详解。MyBatis实现单表的增删查改。MyBatis模糊查询&…

TDSQL手动调整备份节点或冷备节点

一、背景描述 近期TDSQL数据库备份不稳定&#xff0c;有些set实例的备份任务未自动发起。经排查分析&#xff0c;存在多个set实例容量已经超过TB级别&#xff0c;且冷备节点都是同一台。因此&#xff0c;需要手动将当前备份节点改到其他备节点&#xff0c;开启增量备份&#x…

FLStudio怎么冻结轨道以及如何批量复制音符

FLStudio是一款功能强大的音乐制作软件&#xff0c;广泛用于音乐制作和打谱当中。我们在制作音乐时&#xff0c;经常会遇到处理大量音频轨道的情况&#xff0c;过多的音频轨道可能会导致电脑性能受限&#xff0c;从而影响工作流程。为了应对这个问题&#xff0c;FLStudio提供了…

CPPTest实例分析(C++ Test)

1 概述 CppTest是一个可移植、功能强大但简单的单元测试框架&#xff0c;用于处理C中的自动化测试。重点在于可用性和可扩展性。支持多种输出格式&#xff0c;并且可以轻松添加新的输出格式。 CppTest下载地址&#xff1a;下载地址1  下载地址2 下面结合实例分析下CppTest如…

小样本学习登Nature!计算效率高170倍,彻底起飞

中科院新提出的社会行为图谱SBeA登上Nature子刊&#xff01; SBeA是一个用于多动物3D姿势估计、身份识别和社会行为分类的小样本学习框架&#xff0c;能够全面量化自由群居动物的行为&#xff0c;使用较少的标记帧数&#xff08;约 400 帧&#xff09;进行多动物三维姿态估计。…

linux常用非基础命令/操作

本篇用于总结蒟蒻博主在使用linux系统的过程中会经常用到但老实记不住的一些非基础命令和操作&#xff0c;方便遗忘时查阅 一&#xff0c;关闭指定端口的进程以释放端口 每个端口都有一个守护进程&#xff0c;kill掉这个守护进程就可以释放端口 ①使用命令【netstat -anp | gre…

数据结构|树形结构|并查集

数据结构|并查集 并查集 心有猛虎&#xff0c;细嗅蔷薇。你好朋友&#xff0c;这里是锅巴的C\C学习笔记&#xff0c;常言道&#xff0c;不积跬步无以至千里&#xff0c;希望有朝一日我们积累的滴水可以击穿顽石。 有趣的并查集剧情演绎&#xff1a;【算法与数据结构】—— 并…

045、seq2seq

之——序列生成 杂谈 基于RNN实现&#xff0c;通过RNN生成器不断获取输入&#xff0c;更新隐藏状态&#xff0c;将最后生成的隐藏状态传递给解码器&#xff0c;然后自循环迭代直到输出停止。 正文 1.训练 训练时候解码器使用目标句子不断作为输入&#xff0c;就算解码错了输入…

linux休眠唤醒流程,及示例分析

休眠流程 应用层通过echo mem > /sys/power/state写入休眠状态&#xff0c;给一张大概流程图 这个操作对应在kernel/power/main.c的state这个attr的store操作 static ssize_t state_store(struct kobject *kobj, struct kobj_attribute *attr,const char *buf, size_t n) …

ESP32-Thonny 拍摄图片到SD卡

前言&#xff1a; 代码运行在Thonny 添加main.py到单片机中&#xff1a; 可以先运行一下试试&#xff1a;会输出以下信息&#xff1a; 没有问题的话&#xff08;SD卡挂载成功&#xff0c;摄像头初始化成功&#xff09;运行一次主程序后&#xff0c;闪光灯会闪烁一下。 代码&…

js获取某月往前推一年或半年的年月数组

前言 需求&#xff1a;需要显示某月份往前推一年或者半年的费用情况&#xff0c;显示到柱形图上&#xff0c;后台接口只返回有数据的年份&#xff0c;这就需要前端拿全部月份数组去比对并显示。 开始 上代码&#xff1a; // date:选择的月份,比如:2024-04,//n:半年或者1年,…

PTA 天梯赛 L1-010 比较大小【C++】 L1-011 A-B 【C++ vector动态数组】【Python 字符串replace函数】

L1-010 比较大小 判断顺序很重要 #include<iostream> using namespace std; int main() {int a, b, c;cin >> a >> b >> c;int temp;if (a > b) {temp a;a b;b temp;}if (a > c) {temp a;a c;c temp;}if (b > c) {temp b;b c;c te…

C++ //练习 13.17 分别编写前三题中所描述的numbered和f,验证你是否正确预测了输出结果。

C Primer&#xff08;第5版&#xff09; 练习 13.17 练习 13.17 分别编写前三题中所描述的numbered和f&#xff0c;验证你是否正确预测了输出结果。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /*************************…

【御控物联网平台】物联网平台常见通讯协议

随着物联网&#xff08;InternetofThings&#xff0c;IoT&#xff09;的快速发展&#xff0c;越来越多的设备和传感器连接到网络&#xff0c;使得数据的传递和交互变得更加智能化和高效化。在实现这种智能化和高效化的数据交互&#xff0c;过程中&#xff0c;各种不同的通信协议…

防火墙技术基础篇:什么是防火墙

防火墙技术基础篇&#xff1a;什么是防火墙 什么是防火墙&#xff1f; 在我们开始之前&#xff0c;让我们先想象一下一个真实的场景。你的家是你的私人领地&#xff0c;你不希望任何未经许可的人进入。为了保护你的家&#xff0c;你可能会安装一些安全设备&#xff0c;比如门…

webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用

本文讲的全部知识点&#xff0c;都是和webpack相关的。如果你之前有疑问&#xff0c;那本文一定能帮你搞清楚。 问题来源一般是类似下面代码&#xff08;webpack.json中&#xff09;&#xff1a; "scripts": {"dev": "cross-env NODE_ENVdevelopmen…

Kafak详解(1)

简介 消息队列 为什么要有消息队列 图-1 消息队列的使用 消息队列 1)消息Message&#xff1a;网络中的两台计算机或者两个通讯设备之间传递的数据。例如说&#xff1a;文本、音乐、视频等内容。 2)队列Queue&#xff1a;一种特殊的线性表(数据元素首尾相接)&#xff0c;特…

DSView Windows平台编译

在Windows平台编译开源逻辑分析仪软件DSView&#xff0c;因官方没有公布DSView Windows平台源码&#xff0c;主要解决Windows平台以下问题&#xff1a; libusb_get_pollfds不支持Windows平台&#xff0c;导致无法采集数据插入设备后&#xff0c;无法自动识别设备&#xff0c;U…