此处用的是varlet组件库,同理可以使用其他的组件库
关于页面部分只展示输入手机号及注册码部分
<!-- 手机号 -->
<div class="phoneForm">
<div class="phoneIcon">
<var-icon name="phone-outline" color="rgb(38,89,247)" size="25px" />
</div>
<div class="phone">
<var-input placeholder="请输入手机号" :rules="[v => !!v || '手机号不能为空', v => v.length === 11 || '手机号输入错误']" v-model="formData.phone" maxlength="11" />
</div>
</div>
<!-- 验证码 -->
<div class="codeForm">
<div class="codeIcon">
<var-icon name="message-processing-outline" color="rgb(38,89,247)" size="25px" />
</div>
<div class="code">
<var-input placeholder="请输入验证码" :rules="[v => v.length === 6 || '请输入正确的验证码']" v-model="value" />
</div>
<var-button :disabled="dis" text class="getCode" @click="getCode()">
<span v-if="show">获取验证码</span>
<span v-else>{{ timeCount }}s后重试</span>
</var-button>
</div>
js部分
此处js需要使用正则表达式判断手机号是否符合规定,点击获取后先进行手机号判断,如果判断成功则实现60s后重试,同时按钮为禁用状态,此处获取验证码的提示为snackbar提示条,与vant、element中的消息提示很类似,可以参考文档实现
// 验证码
import { ref } from 'vue'
import { Snackbar } from '@varlet/ui'
// 设置展示
const show = ref(true)
// 设置验证码60s初始值
const timeCount = ref(60)
// 设置按钮点击后禁用
const dis = ref(false)
const countDown = ref()
// 获取验证码 倒计时
const getCode = () => {
// 设置正则表达式————手机号判断
let m = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(formData.phone)
if (!formData.phone) {
setTimeout(() => {
Snackbar.error("手机号不能为空")
}, 200)
} else if (formData.phone.length !== 11) {
setTimeout(() => {
Snackbar.error("手机格式错误,请重新输入")
}, 200)
} else if (m) {
setTimeout(() => {
Snackbar.success("获取成功")
}, 200)
// setInterval()函数实现定时调用,1000为毫秒也就是1s
countDown.value = setInterval(() => {
setTimeout(() => {
if (timeCount.value > 0 && timeCount.value <= 60) {
dis.value = true
show.value = false
timeCount.value--
} else {
show.value = true
// 取消setInterval()函数设定的定时执行操作
clearInterval(timeCount.value)
}
}, 0)
}, 1000)
} else if (!m) {
setTimeout(() => {
Snackbar.error("手机格式错误,请重新输入")
}, 200)
}
}