基于ionic2的短信验证码注册倒计时

用户注册时通过短信验证码验证手机真实性是目前最流行的做法，但实现这个功能从找短信平台到用ionic2 实现还是费了一番周折，现把代码贴出来供大家参考，如有不对或者可以改进的也请各位不吝赐教。

系统环境 ionic2 +angular2。

短信平台：云片网，开始用没多久暂时挺好，不做过多的评价。

前台页面：

<ion-header>
  <ion-toolbar>
    <ion-title>
      用户注册
    </ion-title>
    <ion-buttons>
      <button ion-button (click)="dismiss()">关闭</button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="registerForm" (ngSubmit)="(confirm())">
    <ion-list>
      <ion-item>
        <ion-label>用户名</ion-label>
        <ion-input type="text" formControlName="username"></ion-input>
      </ion-item>
      <span padding-left *ngIf="!registerForm.controls.username.valid && registerForm.controls.username.touched" color="danger">
          请输入用户名
        </span>
      <ion-item>
        <ion-label>手机号</ion-label>
        <ion-input type="tel" formControlName="phone"></ion-input>
      </ion-item>
      <span padding-left *ngIf="!registerForm.controls.phone.valid && registerForm.controls.phone.touched" color="danger">
          请输入手机号
        </span>
      <ion-item>
        <ion-label>验证码</ion-label>
        <ion-input type="number" formControlName="verificationCode"></ion-input>

      </ion-item>
      <span padding-left *ngIf="!registerForm.controls.verificationCode.valid&& registerForm.controls.verificationCode.touched"
        color="danger">请输入验证码</span>
      <ion-item>
        <ion-label>密　码</ion-label>
        <ion-input type="password" formControlName="password"></ion-input>
      </ion-item>
      <span padding-left *ngIf="!registerForm.controls.password.valid && registerForm.controls.phone.password" color="danger">请输入密码</span>
    </ion-list>
    <div padding-horizontal>
      <button ion-button block type="submit" [disabled]="!registerForm.valid">注册</button>
    </div>
  </form>
  <button class="verification" id="verification" ion-button small color="secondary" [disabled]="disabled" *ngIf="registerForm.controls.phone.valid"
    (click)="getVerificationCode()">获取验证码</button>
</ion-content>

ts 文件
/**

• 获取手机验证码
  */

  getVerificationCode() {
    let times = 60;
    let timer = null;
    this.disabled = true;
    timer = setInterval(() => {
      times--;
      document.getElementById("verification").innerText = times + "秒后重试";
      if (times <= 0) {
        this.disabled = false;
        document.getElementById("verification").innerText = "发送验证码";
        clearInterval(timer);
        times = 60;
      }
      //console.log(times);
    }, 1000);

    this.randVerifyCode = Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString(); //验证码自行生成，form 提交后自行后台比对验证
    let params = {
      'apikey': '你的apiKey',  //自行申请
      'mobile': this.registerForm.value.phone,
      'text': '【】您的验证码是' + this.randVerifyCode + '。如非本人操作，请忽略本短信'   //自行配置模板
    };
    let url = 'https://sms.yunpian.com/v2/sms/single_send.json';
    this.httpService.postVerfiedCode(url, params).subscribe(res => {
      console.log("res:");
      console.log(res['_body']);
      this.nativeService.showToast("验证码发送成功");
    }, err => {
      if (err['_body'].code == '22') {
        this.nativeService.showToast("一小时内只能发送3次验证码,请稍候再试");
      } else {
        this.nativeService.showToast("验证码发送错误，请稍候再试");
      }
    });
  }

说明this.httpService.postVerfiedCode 即http 的post 方法这里我做了一点修改。手机验证码的比对在注册表单提交后在后台比对。