uni-app获取短信验证码

uni-app获取短信验证码

1、输入手机号码
2、点击获取验证码
3、代码示例
<view >
	<view>
		<input
		v-model="userPwdPhone" 
		type="text" 
		maxlength="20" 
		placeholder="请输入动态验证码" 
		placeholder-style="font-size:30upx;"/>
	</view>
	<view  @tap="getPhonecode">{{codeBtn.codeText}}</view>
</view>

var codeBtn= {
	codeTime: 60,
	codeText: "获取验证码",
	codeStatus: true
};

//手机号码验证规则
var rules = {
	userName: {
		rule:/\S/,
		msg: "账号不能为空"
	},
	userNamePhone: {
		rule: /^1[3456789]\d{9}$/,
		msg: "手机号格式错误"
	},
	userPwdPhone: {
		rule: /^[0-9]{6}$/,
		msg: "请输入6位数字验证码"
	}
};

// 获取验证码时，验证手机号是否正确，并且验证是否在60s后重新发送
getPhonecode(){
	console.log(this.validate('userNamePhone') && this.codeBtn.codeStatus);
	if(this.validate('userNamePhone') && this.codeBtn.codeStatus) {
		this.getValidataCode();
	}
}

// 验证
validate(key){
	let bool=true;
	if(!this.rules[key].rule.test(this[key])){
		uni.showToast({
			title:this.rules[key].msg,
			icon:'none'
		})
		bool=false;
		return false;
	}
	return bool;
}

//请求服务获取短信验证码
getValidataCode() {
	let t = this;
	util.request(
		'/mobile/user/getValidateCode',
		"GET",
		{
			userNamePhone:t.userNamePhone
		},
		function(res){
			if(res.status == '0001'){
				t.myCode = res.data;
				t.codeBtn.codeStatus = false;
				let timerId = setInterval(() => {
					let codetime = t.codeBtn.codeTime;
					codetime--;
					t.codeBtn.codeTime = codetime;
					t.codeBtn.codeText = codetime + "s";
					if(codetime < 1) {
						clearInterval(timerId)
						t.codeBtn.codeText = "重新获取";
						t.codeBtn.codeTime = 60;
						t.codeBtn.codeStatus = true;
					}
				},1000)
			}else if(res.status == '0003'){
				uni.showToast({
					title:'验证码不正确!',
					icon:'none'
				})
			}
		}
	);
}

效果图如下：