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

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

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

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

功能分析

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

頁面實現(xiàn)

<el-form :model="form" label-width="120px">
  <el-form-item label="手機號碼：">
    <el-input v-model="form.name" />
  </el-form-item>
  <el-form-item label="驗證碼：">
    <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">獲取驗證碼</el-button>
      </template>
    </el-input>
  </el-form-item>
</el-form>  
<el-button type="primary">確定</el-button>

實現(xiàn)倒計時

點擊獲取驗證碼按鈕將觸發(fā) **sendCode** 函數(shù)，開始倒計時，并隱藏獲取按鈕，顯示倒計時的秒數(shù)，倒計時結束后會重新顯示獲取按鈕。你可以通過修改 **countdown** 變量的值來指定倒計時的總秒數(shù)。 **startCountdown** 函數(shù)是整個功能的核心是直接可以拿來用的。最后在點擊發(fā)送按鈕的時候對手機號碼輸入框中的號碼做一個校驗。

const sendCode = () =>{
  const reg = /^1[3456789]\d{9}$/;
  if (!reg.test(form.value.phone)) return
  if(!form.value.phone) return ElMessage.error('請輸入手機號碼')
  countdown.value = 60
  messageCodeVis.value = true
  startCountdown()
}
/* 倒計時函數(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('請輸入手機號碼')
  if (!reg.test(form.value.phone)) return
  countdown.value = 60
  messageCodeVis.value = true
  startCountdown()
}
/* 倒計時 */
const startCountdown = () => {
    const intervalId = setInterval(() => {
        if (countdown.value > 0) {
            countdown.value--;
        } else {
            clearInterval(intervalId)
            messageCodeVis.value = false
        }
    }, 1000)
}
const rulesForm = {
  phone: [
  { required: true, message: '請輸入手機號碼', trigger: 'blur' },
  { pattern: /^1[3456789]\d{9}$/, message: '請輸入有效的手機號碼', trigger: 'blur' }
  ]
}
</script>
<template>
    <el-form :model="form" :rules="rulesForm" label-width="120px">
      <el-form-item label="手機號碼：" prop="phone">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="驗證碼：">
        <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">獲取驗證碼</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>

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

您可能感興趣的文章: