首页 > 其他 > 详细

ionic typescript--验证码发送功能

时间:2018-05-18 19:16:48      阅读:662      评论:0      收藏:0      [点我收藏+]
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--验证码发送功能

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

(0)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!