uniapp——获取验证码倒计时功能

是小圆子呀

已于 2024-06-20 09:58:06 修改

阅读量1k

点赞数 3

文章标签： uni-app javascript

于 2024-04-22 18:04:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47094365/article/details/138085363

版权

文章描述了一个基于Vue.js的表单组件，包含手机号和验证码输入框，带有倒计时功能。用户在输入手机号后可点击按钮获取验证码，同时进行前端验证，确保输入正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <view class="get-phone-box">
		<view class="main">
			<view class="item-wrap cy-flex">
				<text class="label">手机号</text>
				<input class="input" type="number" placeholder="请输入手机号" v-model="formData.phone" maxlength="11" />
			</view>
			<view class="item-wrap cy-flex">
				<text class="label">验证码</text>
				<input class="input" type="number" placeholder="请输入验证码" v-model="formData.vercode" maxlength="6" />
				<button class="send" @click="sendMobileCode" :disabled="counting">{{ counting ? `${count}秒后重新获取` : '获取验证码' }}</button>
			</view>
			<button type="default" class="save-btn" @click="checkCode" :disabled="isDisabled">确定</button>
		</view>
	</view>
</template>
<script>
    export default {
        data() {
			return {
				count: 60, // 倒计时时长，单位为秒
				counting: false, // 是否正在倒计时
				
				formData: {
					phone: '',
					vercode: ''
				}
				
			}
		},
      methed:{
        // 发送手机动态码
		sendMobileCode() {
			if (this.counting) return;
			var reg = /^1[3456789]\d{9}$/;
			if (!reg.test(this.formData.phone)) {
				uni.showToast({
					title: '请输入正确的手机格式',
					icon: 'none'
				})
				return
			}
			this.counting = true;
			const timer = setInterval(() => {
				this.count--;
				if (this.count <= 0) {
					clearInterval(timer);
					this.counting = false;
					this.count = 60; // 重置倒计时时长
				}
			}, 1000);
			this.getCaptcha()
		},
        // 获取验证码的接口
		async getCaptcha() {
			try {
				let res = await sendNumberCode({ //调用后台接口，把参数传给后台
					phone: this.formData.phone,
					type: 1
				});
				if (res.code == 0) { //调用成功之后的操作
					uni.showToast({
						title: res.data,
						icon: 'none'
					})
				}
			} catch (err) {
				console.log(err);
				//TODO handle the exception
			}
		}
     }
  }
</script>