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

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

系统环境 ionic2 +angular2。

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

前台页面：

  
    
      用户注册
    
    
      关闭
    
  



  

    
      
        用户名
        
      
      
          请输入用户名
        
      
        手机号
        
      
      
          请输入手机号
        
      
        验证码
        

      
      请输入验证码
      
        密　码
        
      
      请输入密码
    
    

      注册
    
  
  获取验证码

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 方法这里我做了一点修改。手机验证码的比对在注册表单提交后在后台比对。