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

04-23 6809阅读 0评论

1、演示

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

2、说明

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

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

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

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

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

3、Vue2写法

  
    
    {{ code > 0 ? code + 's' : '发送验证码' }}
  


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 = null
      this.code = 3
      timer = setInterval(() => {
        this.code--
        if (this.code == 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
  },
}


4、Vue3写法 

  
    
    {{ code > 0 ? code + 's' : '发送验证码' }}
  


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 = null
  code.value = 60
  timer = setInterval(() => {
    code.value--
    if (code.value == 0) {
      clearInterval(timer)
    }
  }, 1000)
}


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秒的倒计时,并在倒计时结束后清除定时器。


免责声明
1、本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明。
2、本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所
提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何
损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务,本网站概不负责,亦不负任何法律责任。
4、本网站所刊发、转载的文章,其版权均归原作者所有,如其他媒体、网站或个人从本网下载使用,请在
转载有关文章时务必尊重该文章的著作权,保留本网注明的“稿件来源”,并白负版权等法律责任。

手机扫描二维码访问

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (暂无评论,6809人围观)

还没有评论,来说两句吧...

目录[+]