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>
 

猜你喜欢

转载自www.cnblogs.com/rockyjs/p/11896904.html
今日推荐