码迷,mamicode.com
首页 > 其他好文 > 详细

ionic typescript--验证码发送功能

时间:2018-05-18 19:27:14      阅读:328      评论:0      收藏:0      [点我收藏+]

标签:color   手机   input   export   erp   ret   mod   --   mono   

1.新建页面
ionic g page forget
 
2.mode.html文件
<ion-item>
<ion-input clearInput [(ngModel)]=‘code‘ placeholder=‘请输入验证码‘></ion-input>
<button clear ion-button class="i" item-end (tap)="getCode()" [disabled]="!verifyCode.disable">
{{verifyCode.verifyCodeTips}}
</button>
</ion-item>

要点:[disabled]="!verifyCode.disable" 为true时才会允许点击

 

 

 

 

 

3.demo.ts文件

import { Component } from ‘@angular/core‘;
import { NavController, NavParams } from ‘ionic-angular‘;


@Component({
selector: ‘page-forget‘,
templateUrl: ‘forget.html‘,
})
export class ForgetPage {


codeParam = { fromflag: 2, usertel: "130123123" } constructor( public navCtrl: NavController, public navParams: NavParams, } ionViewDidLoad() { console.log(‘ionViewDidLoad RegisterpasswordPage‘); } // 验证码倒计时 verifyCode: any = { verifyCodeTips: "获取验证码", countdown: 60, disable: true } // 倒计时 settime() { if (this.verifyCode.countdown == 1) { this.verifyCode.countdown = 60; this.verifyCode.verifyCodeTips = "获取验证码"; this.verifyCode.disable = true; return; } else { this.verifyCode.countdown--; } this.verifyCode.verifyCodeTips = "重新获取(" + this.verifyCode.countdown + ")"; setTimeout(() => { this.verifyCode.verifyCodeTips = "重新获取(" + this.verifyCode.countdown + ")"; this.settime(); }, 1000); } getCode() { if (this.codeParam.usertel == ‘‘) { console.debug("请填写手机号!"); return; } else{ let alert = this.alertCtrl.create({ title: ‘提示‘, subTitle: ‘验证码发送成功,请注意查收!‘, buttons: [‘确定‘] }); alert.present(); //发送验证码成功后开始倒计时 this.verifyCode.disable = false; this.settime(); } }

 

 

 

ionic typescript--验证码发送功能

标签:color   手机   input   export   erp   ret   mod   --   mono   

原文地址:https://www.cnblogs.com/yc-c/p/9057455.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!