开发者社区> tonge> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

IONIC3验证码倒计时按钮实现

简介: verificationcode.gif 通常在登陆注册或重置密码时,需要用到手机验证码,今天开源一个验证码倒计时的按钮实现。 1.新建页面 ionic g page forget 2.
+关注继续查看
img_784916b70c72309187aa3934de12f304.gif
verificationcode.gif

通常在登陆注册或重置密码时,需要用到手机验证码,今天开源一个验证码倒计时的按钮实现。

1.新建页面

ionic g page forget 

2.forget.html代码实现

<ion-header>
<ion-navbar color="secondary">
    <ion-title>找回密码</ion-title>
</ion-navbar>
</ion-header>
<ion-content fullscreen>
<ion-list no-lines>
    <ion-item style="background:none;" text-center>
    ![](assets/imgs/logo.jpg)
    <h3 style="color:white">积分系统</h3>
    </ion-item>
</ion-list>
<ion-grid class="xmf_form">
    <ion-row>
    <ion-item class="item_input">
        <ion-input type="number" [(ngModel)]="codeParam.usertel" placeholder="手机号"></ion-input>
        <button item-right ion-button round [disabled]="!verifyCode.disable" (click)="getCode()">{{verifyCode.verifyCodeTips}}</button>
    </ion-item>
    </ion-row>
    <ion-row>
    <ion-item class="item_input">
        <ion-input type="number" [(ngModel)]="params.vcode" placeholder="验证码"></ion-input>
    </ion-item>
    </ion-row>
    <ion-row>
    <ion-item class="item_input">
        <ion-input type="password" [(ngModel)]="params.newpass" placeholder="密码"> </ion-input>
    </ion-item>
    </ion-row>
    <ion-row>
    <ion-item class="item_input">
        <ion-input type="password" [(ngModel)]="params.sure_pwd" placeholder="确认密码"> </ion-input>
    </ion-item>
    </ion-row>
    <ion-row>
    <ion-col style="padding: 10px 20px 0px 20px;" text-center>
        <button ion-button full round (click)="doReset()"> 重置 </button>
    </ion-col>
    </ion-row>
    <ion-row>
    <ion-col tappable text-center>
        <!--忘记密码?-->
    </ion-col>
    </ion-row>
</ion-grid>
</ion-content>

3.forget.ts代码实现

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

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

    params = {
        usertel: '',
        newpass: '',
        vcode: '',
        sure_pwd: ''
    }
    codeParam = {
        fromflag: 2,
        usertel: ""
    }
    constructor(public navCtrl: NavController, public navParams: NavParams) {
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad ForgetPage');
    }


    // 验证码倒计时
    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;
        }

        //发送验证码成功后开始倒计时

        this.verifyCode.disable = false;
        this.settime();

    }
    doReset() {
        this.params.usertel = this.codeParam.usertel;

        if (this.params.usertel == "") {
        console.debug("请输入手机号");
        return;
        }

        if (this.params.vcode == "") {
        console.debug("请输入验证码");
        return;
        }

        if (this.params.newpass == this.params.sure_pwd) {

        } else {
        console.debug("两次密码输入不一致");
        }
    }
}

完!好了,请收藏点赞,谢谢!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java实现中文算数验证码(算数运算+-*/)
为了防止,页面向数据库暴力注册入力,用户登录暴力破解,所以加入验证码,验证码无法被软件获取上边的内容(加入算数计算,更加安全),所以在现在技术,暂时安全。 先看效果图: 第一次加载比较慢,防止无法加载验证码显示,后台获取准备好的默认正在加载图片(静态图片),后台图片获取好后,替代。 验证码效果图:                后台Java图片实现类Verificatio
1315 0
Java实现验证码验证功能
Java如何实现验证码验证功能呢?日常生活中,验证码随处可见,他可以在一定程度上保护账号安全,那么他是怎么实现的呢? Java实现验证码验证功能其实非常简单:用到了一个Graphics类在画板上绘制字母,随机选取一定数量的字母随机生成,然后在画板上随机生成几条干扰线。 首先,写一个验证码生成帮助类,用来绘制随机字母: import java.awt.Color; import j
1257 0
使用IO映射的方式获取tiny4412板子上的ID号
在以前的文章中,有一篇  基于ARM-contexA9-Linux驱动开发:如何获取板子上独有的ID号 在那篇文章中,具体可以参考。那时候我使用了简单的字符设备驱动框架,最终的ID号通过read方法可将ID读取出来,但是,这样做就太麻烦啦,有没有更简单的方法呢?其实有,这种方法称作IO地址的映射,而今天我们要说的是IO地址的动态映射方法,静态映射就太简单了,直接调用相应的接口,配置相应的寄存器,设置状态就可以实现。
599 0
简单的验证码倒计时功能
简单的验证码倒计时功能
0 0
实现计时器和倒计时工具(Unity3D)
今天分享一下如何基于Unity3D做计时器工具,为了方便演示,使用了UGUI的Text,代码简单具有拓展性,然后有什么错误或者意见也欢迎大家给我提出来。微信二维码已经显示在博客主页,有想要沟通学习的,项目外包的都可以加一下。 分享一下我另一篇关于时间计时的文章: 【Unity3D】获取到游戏时间,并显示出来
0 0
基于 Kotlin 特性实现的验证框架
基于 Kotlin 特性实现的验证框架
0 0
Java实现图片验证码
Java实现图片验证码
0 0
微信小程序获取验证码倒计时60秒案例
微信小程序获取验证码倒计时60秒案例
0 0
+关注
tonge
热衷于移动开发技术的研究;对移动端后台架构、移动安全颇有研究;熟悉整个移动开发流程;写过移动跨平台开发技术系列教程
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载