当前位置：首页 > news >正文

短信验证码

news 2025/10/27 8:39:49

注册页面才需要短信验证码：使用 loginForm.validCode 它的显示

<el-form-item v-if="formType" prop="validCode"><el-input v-model="loginForm.validCode" placeholder="验证码" prefix-icon="Lock"><template #append><el-button @click="getValidCode" :disabled="validCodeData.sending" style="width: 100px;">{{ validCodeData.title }}</el-button></template></el-input>
</el-form-item>

在这里插入图片描述
获取验证码：

判断手机号码是否存在
如果手机号码正确，点击发送验证码之后发送请求，在此期间需要等待60s，用户不能点击
等待时间超过60s时，清除 timer 并重置 validCodeData

const validCodeData = reactive({title: '获取验证码',time: 60,sending: false    // 加锁，控制发送期间禁止重复点击
})
let timer = null
// 获取验证码
const getValidCode = async () => {if (timer || validCodeData.sending) return// 验证手机号码const phoneReg = /^1[3-9]\d{9}$/if (!loginForm.userName || !phoneReg.test(loginForm.userName)) {ElMessage.warning('请输入正确的手机号')return}// 发请求前加上锁validCodeData.sending = true// 发请求try {const res = await getCode({ tel: loginForm.userName })if (res.code === 10000) {ElMessage.success('发送成功')// 倒计时timer = setInterval(() => {if (validCodeData.time <= 0) {clearInterval(timer)timer = nullvalidCodeData.title = '获取验证码'validCodeData.time = 60validCodeData.sending = false} else {validCodeData.time -= 1validCodeData.title = `${validCodeData.time}s`}}, 1000)}} catch (error) {ElMessage.error(error)validCodeData.sending = false}
}