30秒学会 —— 《获取验证码基本操作》

Posted 2022-03-30 0.活在风浪里

前期回顾      

懒人必备 —— 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用，及其好使的插件，开发懒人必整，就算是自己可以写，一大堆代码，真的要写吗？https://blog.csdn.net/m0_57904695/article/details/123767269?spm=1001.2014.3001.5501

---

先说先验证码思路，其实很简单，

1、前端触发获取验证码,同步显示有效验证倒计时;

2、后台通过代理平台发送验证短信;

解释：你在页面触发验证码请求后，后台接口发送至代理平台，代理平台发送信息到你手机上，验证码回复的信息可以自定义设置，需要在代理验证码平台购买

念及此， 写一个，前台很有意思，短短几行代码，实现一个功能，热爱代码永不断， 

前台效果：

 

用例： 

<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]))\\d8$/
            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>

结语：

祝大家在2022都变得更强