快捷導(dǎo)航

使用Vue純前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼并實(shí)現(xiàn)倒計(jì)時(shí)

更新時(shí)間：2024年04月18日 10:19:15 作者：小白Coding日志

在實(shí)際的應(yīng)用開發(fā)中,涉及用戶登錄驗(yàn)證、密碼重置等場(chǎng)景時(shí),通常需要前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的功能,以提升用戶體驗(yàn)和安全性,以下是一個(gè)簡(jiǎn)單的前端實(shí)現(xiàn),演示了如何在用戶點(diǎn)擊發(fā)送驗(yàn)證碼按鈕時(shí)觸發(fā)短信驗(yàn)證碼的發(fā)送,并開始一個(gè)倒計(jì)時(shí)

你好，我是小白Coding日志，一個(gè)熱愛技術(shù)的程序員。在這里，我分享自己在編程和技術(shù)世界中的學(xué)習(xí)心得和體會(huì)。希望我的文章能夠給你帶來一些靈感和幫助。歡迎來到我的博客，一起在技術(shù)的世界里探索前行吧！
在實(shí)際的應(yīng)用開發(fā)中，涉及用戶登錄驗(yàn)證、密碼重置等場(chǎng)景時(shí)，通常需要前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的功能，以提升用戶體驗(yàn)和安全性。這個(gè)過程涉及與后端的協(xié)同配合，通過調(diào)用短信網(wǎng)關(guān)或短信服務(wù)接口，將驗(yàn)證碼發(fā)送至用戶手機(jī)。以下是一個(gè)簡(jiǎn)單的前端實(shí)現(xiàn)，演示了如何在用戶點(diǎn)擊發(fā)送驗(yàn)證碼按鈕時(shí)觸發(fā)短信驗(yàn)證碼的發(fā)送，并開始一個(gè)倒計(jì)時(shí)。

功能分析

遇事先認(rèn)真分析是我今年在工作上的要求之一
將目標(biāo)分解為小模塊后再逐步完成。首先，我們需要一個(gè)手機(jī)號(hào)碼輸入框，并對(duì)輸入的手機(jī)號(hào)碼進(jìn)行合法性校驗(yàn)。其次，需要一個(gè)驗(yàn)證碼輸入框，以及一個(gè)獲取短信驗(yàn)證碼的按鈕。點(diǎn)擊該按鈕將向服務(wù)端發(fā)送獲取請(qǐng)求，參數(shù)為輸入的手機(jī)號(hào)碼，并開始顯示倒計(jì)時(shí)，倒計(jì)時(shí)結(jié)束后重新顯示獲取驗(yàn)證碼按鈕。服務(wù)端收到請(qǐng)求后會(huì)給該手機(jī)號(hào)碼發(fā)送短信驗(yàn)證碼，然后我們輸入收到的驗(yàn)證碼即可進(jìn)行下一步操作。
項(xiàng)目使用vue3+vite+ElementPlus，這里假設(shè)你已經(jīng)搭建好項(xiàng)目了！

頁面實(shí)現(xiàn)

<el-form :model="form" label-width="120px">
  <el-form-item label="手機(jī)號(hào)碼：">
    <el-input v-model="form.name" />
  </el-form-item>
  <el-form-item label="驗(yàn)證碼：">
    <el-input v-model="form.code" >
      <template #suffix>
        <div v-if="messageCodeVis" class="second-text">{{countdown}}秒后重新獲取</div>
        <el-button v-else type="primary" link @click="sendCode">獲取驗(yàn)證碼</el-button>
      </template>
    </el-input>
  </el-form-item>
</el-form>  
<el-button type="primary">確定</el-button>

實(shí)現(xiàn)倒計(jì)時(shí)

點(diǎn)擊獲取驗(yàn)證碼按鈕將觸發(fā) **sendCode** 函數(shù)，開始倒計(jì)時(shí)，并隱藏獲取按鈕，顯示倒計(jì)時(shí)的秒數(shù)，倒計(jì)時(shí)結(jié)束后會(huì)重新顯示獲取按鈕。你可以通過修改 **countdown** 變量的值來指定倒計(jì)時(shí)的總秒數(shù)。 **startCountdown** 函數(shù)是整個(gè)功能的核心是直接可以拿來用的。最后在點(diǎn)擊發(fā)送按鈕的時(shí)候?qū)κ謾C(jī)號(hào)碼輸入框中的號(hào)碼做一個(gè)校驗(yàn)。

const sendCode = () =>{
  const reg = /^1[3456789]\d{9}$/;
  if (!reg.test(form.value.phone)) return
  if(!form.value.phone) return ElMessage.error('請(qǐng)輸入手機(jī)號(hào)碼')
  countdown.value = 60
  messageCodeVis.value = true
  startCountdown()
}
/* 倒計(jì)時(shí)函數(shù) */
const startCountdown = () => {
  const intervalId = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(intervalId)
      messageCodeVis.value = false
    }
  }, 1000)
}

全部代碼

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
const form = ref({
  phone: '',
  code: ''
})
const messageCodeVis = ref(false)
let countdown = ref(0)
const sendCode = () =>{
  const reg = /^1[3456789]\d{9}$/;
  if(!form.value.phone) return ElMessage.error('請(qǐng)輸入手機(jī)號(hào)碼')
  if (!reg.test(form.value.phone)) return
  countdown.value = 60
  messageCodeVis.value = true
  startCountdown()
}
/* 倒計(jì)時(shí) */
const startCountdown = () => {
    const intervalId = setInterval(() => {
        if (countdown.value > 0) {
            countdown.value--;
        } else {
            clearInterval(intervalId)
            messageCodeVis.value = false
        }
    }, 1000)
}
const rulesForm = {
  phone: [
  { required: true, message: '請(qǐng)輸入手機(jī)號(hào)碼', trigger: 'blur' },
  { pattern: /^1[3456789]\d{9}$/, message: '請(qǐng)輸入有效的手機(jī)號(hào)碼', trigger: 'blur' }
  ]
}
</script>
<template>
    <el-form :model="form" :rules="rulesForm" label-width="120px">
      <el-form-item label="手機(jī)號(hào)碼：" prop="phone">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="驗(yàn)證碼：">
        <el-input v-model="form.code" >
          <template #suffix>
            <div v-if="messageCodeVis" class="second-text">{{countdown}}秒后重新獲取</div>
            <el-button v-else type="primary" link @click="sendCode">獲取驗(yàn)證碼</el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>  
  <el-button type="primary">確定</el-button>
</template>
<style scoped>
.read-the-docs {
  color: #888;
}
.second-text {
  color: #e60707;
}
</style>

到此這篇關(guān)于使用Vue純前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼并實(shí)現(xiàn)倒計(jì)時(shí)的文章就介紹到這了,更多相關(guān)使用Vue純前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼并實(shí)現(xiàn)倒計(jì)時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: