【uni-app】实现获取验证码功能

 【uni-app】实现获取验证码功能

一、注册界面-获取验证码的需求：

情况1：手机号码正确
输入手机号码---点击--“获取验证码”---出现“发送中”...---重新获取（60）

 

 

 

 情况2：手机号码不正确
输入手机号码（或没有输入）---点击获取验证码--弹出“请输入“ 正确号码的手机号码 ”的提示框

 

 

 二、思路如下:
（1）先进行排版，设置输入框input的参数，初始值

（2）绑定点击事件，追加样式 
（3）在点击事件里面

第一步：

需要判断手机号码的正确与否，校验手机号码是否有误

第二步：

调用setTimeout定时器方法，

同时需要设置每隔60秒就重新获取验证码，就需要调用SetTimer函数

第三步：

同时需要setInterval方法，不停地调用函数，

直到 clearInterval被调用或窗口被关闭，且需要隐藏软键盘及颜色的切换

 

 

源码如下（里面包含注册界面的全部内容）：

<template>
	
	
	<view>
		<!-- 登录页面正中间图标 -->
		<view class="logo">
			<view class="img">
				<image mode="widthFix"
					src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fd0%2Fa5%2F86%2Fd0a586e0cece1f1dec648e9aa3d8c9d6.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633761077&t=84f5ce7dc4918ef2e89d1fa4e1e72504">
				</image>
			</view>
		</view>
		<!-- 注册界面 -->
		<view class="form userform">
			<view class="username">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input placeholder="请输入手机号" v-model="phoneNumber" placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="code">
				<input placeholder="请输入验证码" v-model="code" placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="password">
				<input placeholder="请输入密码" v-model="passwd" password=true
					placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="btn" @tap="doReg">立即注册</view>
			<view class="res">
				<view @tap="toLogin">已有账号立即登录</view>
			</view>
		</view>

	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				phoneNumber: "",
				code: '',
				passwd: "",
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false
			}
		},
		onLoad() {

		},
		methods: {
			Timer() {},
			getCode() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(255,255,255,0.5)" //追加样式，修改颜色
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					}); //弹出提示框
					//示例默认1234，生产中请删除这一句。
					this.code = '1234'; //发送验证码，进行填入
					this.setTimer(); //调用定时器方法
				}, 1000)
			},
			//setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			doReg() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				//模板示例部分验证规则
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				//示例验证码，实际使用中应为请求服务器比对验证码是否正确。
				if (this.code != 1234) {
					uni.showToast({
						title: '验证码不正确',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					title: '提交中...'
				})
				//模板示例把用户注册信息储存在本地，实际使用中请替换为上传服务器。
				setTimeout(() => {
					uni.getStorage({
						key: 'UserList',
						success: (res) => {
							//增加记录，密码md5
							res.data.push({
								username: this.phoneNumber,
								passwd: md5(this.passwd)
							})
							uni.setStorage({
								key: 'UserList',
								data: res.data,
								success: function() {
									uni.hideLoading()
									uni.showToast({
										title: '注册成功',
										icon: "success"
									});
									setTimeout(function() {
										uni.navigateBack();
									}, 1000)
								}
							});
						},
						fail: (e) => {
							uni.hideLoading()
							console.log('error');
							//新建UserList
							uni.setStorage({
								key: 'UserList',
								data: [{
									username: this.phoneNumber,
									passwd: md5(this.passwd)
								}],
								success: function() {
									uni.hideLoading()
									uni.showToast({
										title: '注册成功',
										icon: "success"
									});
									setTimeout(function() {
										uni.navigateBack();
									}, 1000)
								},
								fail: function(e) {
									console.log('set error:' + JSON.stringify(e));
								}
							});
						}
					});
				}, 1000)
			},
			toLogin() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				uni.redirectTo({
					url: 'login'
				}); //跳转到登录页
				uni.navigateBack(); //关闭当前页面，返回上一页面
			}
		}
	}
</script>

<style lang="scss">
	

	page {
		background: #3F536E; //整一个页面的背景颜色
		// linear-gradient(to bottom, #f06c7a 0%, #f06c7a 100%);
		height: 100%;
	}

	.icon {
		color: #ffffff;
	}

	.logo {
		width: 100%;
		height: 45vw;
		display: flex;
		justify-content: center;
		align-items: center;

		.img {
			width: 25%;
			height: 25vw;

			image {
				width: 100%;
				border-radius: 100%;
			}
		}
	}

	.form {
		width: 86%;
		padding: 0 7%;
		font-size: 30upx;

		.username,
		.password,
		.code {
			width: calc(100% - 90upx);
			height: 90upx;
			display: flex;
			align-items: center;
			border-radius: 45upx;
			background-color: rgba($color: #ffffff, $alpha: 0.1);
			padding: 0 45upx;
			margin-bottom: 26upx;

			input {
				width: 100%;
				height: 50upx;
				color: rgba($color: #ffffff, $alpha: 0.8);
				font-weight: 200;
			}
		}

		.btn {
			color: #f06c7a;
			width: 100%;
			height: 90upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 45upx;
			background-color: #fff;
			font-size: 40upx;
		}
	}

	.userform {
		.username {
			position: relative;

			.get-code {
				position: absolute;
				height: 90upx;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 0;
				padding: 0 40upx;
				z-index: 3;

				&:after { //点击以后，左边出现白色的线
					content: " ";
					width: 1upx; //宽度为1upx
					height: 50upx; //高度为50upx
					background-color: #fff;  //背景颜色为白色
					position: absolute;
					z-index: 3;
					margin-right: 100%;
					left: 0;
					top: 20upx;
				}
			}
		}

		.res {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100upx;
			color: rgba($color: #ffffff, $alpha: 0.8);
		}
	}
</style>