ng 手机验证码验证/发送（含倒计时）
ng 的手机号码进行验证：
1.在对应的ts文件中，先声明一个变量
private mobile: string
private btnCaptchaText: string = '发送验证码'
private timeLeft: number = 0
2.在对应的触发事件中写入需要的事件代码
if (!/^1[3456789]{1}\d{9}$/.test(this.mobile)) {
this.countDown(60, (timeLeft) => {
this.btnCaptchaText = `${this.timeLeft}s`
},
() => {
this.btnCaptchaText = '获取验证码'
})
return
}
this.playerService.getUserCode(this.mobile).subscribe(
res => {
this.countDown(60, (timeLeft) => {
this.btnCaptchaText = `${this.timeLeft}s`
},
() => {
this.btnCaptchaText = '获取验证码'
})
console.log(res)
}
)
}
countDown(times: number, onCount, onComplete) {
this.timeLeft = times
let timer = setInterval(() => {
if (this.timeLeft <= 0) {
clearInterval(timer)
onComplete()
} else {
this.timeLeft--
onCount(this.timeLeft)
}
}, 1000)
}
解析：getUserCode 就是在服务中数据传输中定义的函数
=> xxx.service.ts中
userCodeUrl:string = "http://192.168.1.87:8081/api/captcha/bindMobile";
getUserCode(mobile: string):Observable<any>{
return this.http.post(this.userCodeUrl, {mobile}, this.httpOptions)
}
2.对应的html中
<span><button (click)="sendcode()" [disabled]="timeLeft > 0">{{btnCaptchaText}}</button></span>
