30 Seconds to Learn - "Basic Operation of Obtaining Verification Code"

Early review      

A must for lazy people - time artifact moment_0. A blog living in the storm Want to write? https://blog.csdn.net/m0_57904695/article/details/123767269?spm=1001.2014.3001.5501

---

Let's talk about the idea of ​​verification code first, which is actually very simple.

1. The front-end triggers to obtain the verification code, and synchronously displays the valid verification countdown;

2. The background sends the verification SMS through the proxy platform;

Explanation: After you trigger the verification code request on the page, the background interface will be sent to the proxy platform, and the proxy platform will send information to your mobile phone. The information returned by the verification code can be customized and set, and you need to purchase it on the proxy verification code platform.

With this in mind, write one, the front desk is very interesting, just a few lines of code, realize a function, love the code forever, 

Front effect:

 

example: 

<template>
    <div class="login">
        <el-input v-model="phone" :suffix-icon="icon" class="inp"></el-input>
        <el-button type="primary" v-if="flag" @click="getCode" :disabled="dis">获取验证码</el-button>
        <span v-else>获取验证码还有{
   
   { num }}秒</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            phone: "",
            num: 5,
            flag: true,//按钮和验证码的切换条件
            icon: 'el-icon-close',
            dis: true
        };
    },
    methods: {
        getCode() {
            this.flag = false
            let timer = null;//每次点击都会先赋值成null，防止用户快速多次点击，造成
            //定时器队列
            timer = setInterval(() => {
                //点击按钮如果num大于等于1就--，
                if (this.num >= 1) {
                    this.num--;
                } else {//点击按钮如果没有大于等于1，说明小于1，就恢复成按钮状态
                    clearInterval(timer);
                    this.flag = true;
                }
            }, 1000);
        },

        phoneReg() {
            let reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
            if (reg.test(this.phone)) {
                this.icon = 'el-icon-check'
                this.dis = false
            } else {
                this.icon = 'el-icon-close'
                this.dis = true
            }
        }
    },
    watch: {
        phone: {
            // deep: true,
            // immediate: true,
            handler(newVal, oldVal) {
                // 其实将phoneReg这个函数直接写在这里也可以，
                // 但是为了结构更加清晰，尽量的将逻辑抽离，这样一眼明了！
                this.phoneReg()
            },
        },
    },

};
</script>

<style lang="scss" scoped>
.login {
    padding: 15px;
    /deep/ .el-input__inner{
        height: 50px;
        border-radius: 5px;
    }
   /deep/ .el-input{
      width: 400px;
      margin: 15px;
   }
   /deep/ .el-icon-check{
        color: green;
        font-size: 25px;
        line-height: 50px;

    }
   /deep/ .el-icon-close:before {
        font-size: 25px;
        color: red;
        line-height: 50px;

    }
}
</style>

Conclusion:

I wish you all the best in 2022