zoukankan      html  css  js  c++  java
  • JS获取验证码倒计时

    data() {
                return {
                    phone:'',
                    code:'',
                    time:0,
                    timer:{},
                    codeName:'获取验证码'
                }
    },
    mounted(){
    var getCodeTime = uni.getStorageSync('getCodeTime') ? uni.getStorageSync('getCodeTime') : 0;//页面初始化 if (getCodeTime > 0) { this.timeCount(getCodeTime) } }
    methods: {
    
                timeCount(time){//倒计时
                    uni.setStorageSync('isGetCode',1)
                    clearInterval(this.timer);
                    var set_time = 20;
                    this.timer = setInterval(()=>{
                        this.time = set_time - time
                        uni.setStorageSync('getCodeTime',this.time)
                        this.codeName = this.time + '秒'
                        time++;
                        if (this.time <= 1) {
                            this.codeName = '获取验证码'
                            uni.setStorageSync('isGetCode',0)
                            uni.setStorageSync('getCodeTime',0)
                            clearInterval(this.timer);
                        }
                    },1000);
                },
    
                clearTime(){//确认后 重置验证码
                    uni.setStorageSync('isGetCode',0)
                    uni.setStorageSync('getCodeTime',0)
                    this.time = 0;
                    clearInterval(this.timer);
                },
    
                isTime(){//获取验证码
                    var isGetCode = uni.getStorageSync('isGetCode') ? uni.getStorageSync('isGetCode') : 0;
                    var getCodeTime = uni.getStorageSync('getCodeTime') ? uni.getStorageSync('getCodeTime') : 0;
    
                    if (isGetCode == 0 || getCodeTime == 0) {//获取验证码
                        var flag = this.isPhone(this.phone);
                        if (!flag) {
                            uni.showToast({title:'手机号格式错误!',icon:'none'})
                            return false;
                        }
    
                        this.$api.urlXXX({phone:this.phone}).then((res)=>{
                            if (res.success) {
                                this.timeCount(getCodeTime);
                                uni.showToast({title:'验证码获取成功!',icon:'none'})
                            } else {
                                uni.showToast({title:res.message,icon:'none'})
                                return false;
                            }
                        });
    
                    } else {
    
                    }
                },
                confirm(){//确定
    
                    if (this.isConfirm) {
                        var flag = this.isPhone(this.phone);
                        if (!flag) {
                            uni.showToast({title:'手机号格式错误!',icon:'none'})
                            return false;
                        }
                        if (this.code.length < 4) {
                            uni.showToast({title:'验证码错误!',icon:'none'})
                            return false;
                        }
                    }
                },
                isPhone(str) {
                    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                    if (!myreg.test(str)) {
                        return false;
                    } else {
                        return true;
                    }
                }
                
            },
  • 相关阅读:
    MySQL 练习题
    MySQL 增删查改
    HTML显示与隐藏
    360布局
    div布局
    HTML练习2
    HTML练习

    if语句的用法及其案例
    输入输出,数据类型与运算符
  • 原文地址:https://www.cnblogs.com/peipeiyu/p/14717359.html
Copyright © 2011-2022 走看看