前端点击获取验证码，进行60秒倒计时

不要失眠啊！

于 2023-10-26 19:55:03 发布

阅读量230

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_61672533/article/details/134063521

版权

html 样式就自己写吧


<input class="search" type="text" placeholder="请输入电话号码" v-model="phone">
<input class="search" type="text" placeholder="请输入验证码" v-model="ownersName">
<view class="verification-code" @click="verificationCode" v-if="codeShow">获取验证码</view>
<view class="code" v-else>{{count}}秒后重试</view>

js 手机号正则验证倒计时可直接粘贴复制

// 获取验证码
		verificationCode() {
			var Reg = /^[1][34578][0-9]{9}$/;
			// 正则验证
			if(Reg.test(this.phone)) {
				uni.showToast({
					title: '验证码获取成功',
					icon: 'none',
					duration: 2000
				})
				const TIME_COUNT = 60;
				if(!this.timer) {
					this.count = TIME_COUNT;
					this.codeShow = false;
					this.timer = setInterval(() => {
						if(this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.codeShow = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}

			} else {
				uni.showToast({
					title: '手机号码格式不正确',
					icon: 'none',
					duration: 2000
				})
			}
		},