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

本文主要是介绍前端开发攻略---实现发送手机验证码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秒的倒计时,并在倒计时结束后清除定时器。

这篇关于前端开发攻略---实现发送手机验证码60s倒计时效果(手机号验证+按钮文字自定义显示+Vue2写法+Vue3写法)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/929579

相关文章

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

基于Python实现简易视频剪辑工具

《基于Python实现简易视频剪辑工具》这篇文章主要为大家详细介绍了如何用Python打造一个功能完备的简易视频剪辑工具,包括视频文件导入与格式转换,基础剪辑操作,音频处理等功能,感兴趣的小伙伴可以了... 目录一、技术选型与环境搭建二、核心功能模块实现1. 视频基础操作2. 音频处理3. 特效与转场三、高

Python实现中文文本处理与分析程序的示例详解

《Python实现中文文本处理与分析程序的示例详解》在当今信息爆炸的时代,文本数据的处理与分析成为了数据科学领域的重要课题,本文将使用Python开发一款基于Python的中文文本处理与分析程序,希望... 目录一、程序概述二、主要功能解析2.1 文件操作2.2 基础分析2.3 高级分析2.4 可视化2.5

Java实现预览与打印功能详解

《Java实现预览与打印功能详解》在Java中,打印功能主要依赖java.awt.print包,该包提供了与打印相关的一些关键类,比如PrinterJob和PageFormat,它们构成... 目录Java 打印系统概述打印预览与设置使用 PageFormat 和 PrinterJob 类设置页面格式与纸张

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具:将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os