你好，我是小白Coding日志，一個熱愛技術(shù)的程序員。在這里，我分享自己在編程和技術(shù)世界中的學(xué)習(xí)心得和體會。希望我的文章能夠給你帶來一些靈感和幫助。歡迎來到我的博客，一起在技術(shù)的世界里探索前行吧！
在實際的應(yīng)用開發(fā)中，涉及用戶登錄驗證、密碼重置等場景時，通常需要前端實現(xiàn)發(fā)送短信驗證碼的功能，以提升用戶體驗和安全性。這個過程涉及與后端的協(xié)同配合，通過調(diào)用短信網(wǎng)關(guān)或短信服務(wù)接口，將驗證碼發(fā)送至用戶手機。以下是一個簡單的前端實現(xiàn)，演示了如何在用戶點擊發(fā)送驗證碼按鈕時觸發(fā)短信驗證碼的發(fā)送，并開始一個倒計時。
遇事先認真分析是我今年在工作上的要求之一
將目標分解為小模塊后再逐步完成。首先，我們需要一個手機號碼輸入框，并對輸入的手機號碼進行合法性校驗。其次，需要一個驗證碼輸入框，以及一個獲取短信驗證碼的按鈕。點擊該按鈕將向服務(wù)端發(fā)送獲取請求，參數(shù)為輸入的手機號碼，并開始顯示倒計時，倒計時結(jié)束后重新顯示獲取驗證碼按鈕。服務(wù)端收到請求后會給該手機號碼發(fā)送短信驗證碼，然后我們輸入收到的驗證碼即可進行下一步操作。
項目使用vue3+vite+ElementPlus，這里假設(shè)你已經(jīng)搭建好項目了！
<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>
點擊獲取驗證碼按鈕將觸發(fā) sendCode 函數(shù)，開始倒計時，并隱藏獲取按鈕，顯示倒計時的秒數(shù)，倒計時結(jié)束后會重新顯示獲取按鈕。你可以通過修改 countdown 變量的值來指定倒計時的總秒數(shù)。startCountdown 函數(shù)是整個功能的核心是直接可以拿來用的。最后在點擊發(fā)送按鈕的時候?qū)κ謾C號碼輸入框中的號碼做一個校驗。
const sendCode = () =>{const reg = /^1[3456789]\d{9}$/;if (!reg.test(form.value.phone)) returnif(!form.value.phone) return ElMessage.error('請輸入手機號碼')countdown.value = 60messageCodeVis.value = truestartCountdown()}/* 倒計時函數(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>即使代碼邏輯很簡單，也值得記錄下來。我的編程目標是避免重復(fù)造輪子！??
祝小伙伴們新年快樂!??龍年大吉！
推薦一個AI生成紅包封面的工具：https://github.com/all-in-aigc/aicover
在線demo: https://aicover.design
