uni-app获取短信验证码
uni-app获取短信验证码1、输入手机号码2、点击获取验证码3、代码示例<view ><view><inputv-model="userPwdPhone"type="text"maxlength="20"placeholder="请输入动态验证码"placeholder-style="font-size:30upx;"/></view><vi
·
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'
})
}
}
);
}
效果图如下:
更多推荐
已为社区贡献4条内容
所有评论(0)