前端设置，验证码登录

一时失言乱红尘 2022-10-27 13:53 168阅读 0赞

<group class="shadow" gutter="0">
            <x-input v-model="mobileCaptcha" placeholder="请输入手机验证码" class="weui-vcode" keyboard="number" :max="6"></x-input>
            <button @click="sendMessage" class="btn" ref="color">{
       {word}}</button>
          </group>

// 1.1 非空判断
        sendMessage() { 
          if (!this.phoneNo) { 
            this.$vux.toast.text("请输入手机号码");
            return false;
          }
          // if (!this.captcha) { 
          // this.$vux.toast.text("请输入图片验证码")
          // return false;
          // }
          if (this.isOvertime) { 
            this.$vux.toast.text("别急，正在发送中");
            return false;
          }
          this.sms();
        },
        // 2.短信验证码请求
        sms() { 
          new Promise((resolve, reject) => { 
            Api_auth.sms(this.captcha, this.phoneNo)
              .then(response => { 
                this.$vux.toast.text("短信已发送");
                // this.$refs.color.style.backgroundColor = "#2e82d8";
                let that = this,
                  time = 60;
                var sendTimer = setInterval(function() { 
                  that.isOvertime = true;
                  time--;
                  that.word = time + " 后重新发送";
                  if (time < 0) { 
                    that.isOvertime = false;
                    clearInterval(sendTimer);
                    that.word = "获取验证码";
                    // that.$refs.color.style.backgroundColor = "#EF7E00";
                  }
                }, 1000);
              })
              .catch(error => { 
                this.$vux.toast.text(error);
                reject(error);
              });
          });
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 html web前端登录，短信验证码登录

html web前端登录，短信验证码登录 1，手机号码格式校验 2，按钮点击60秒倒计时，按钮限制点击 3，验证码/或密码长度校验（被注释，公司发的验证码长度不一致

╰半橙微兮°/ 2024年02月21日 11:08/ 0 赞/ 63 阅读

相关 laravel入门实战开发（六）：登录验证码验证登录

上一节，我们完成了多字段登录功能这一节，我们来完成验证码功能要使用验证码，我们就需要使用拓展包，可以理解为插件，首先我们利用composer下载拓展

约定不等于承诺〃/ 2023年02月14日 06:47/ 0 赞/ 7 阅读

相关短信验证码登录

1、新建一个[ems.ejs文件][ems.ejs] <div> <label for="phone">手机号：</label> <i

青旅半醒/ 2023年01月14日 01:41/ 0 赞/ 180 阅读

相关前端设置，验证码登录

<group class="shadow" gutter="0"> <x-input v-model="mobileCaptcha" place

一时失言乱红尘/ 2022年10月27日 13:53/ 0 赞/ 169 阅读

相关使用图片验证码进行登录验证

需求：后端系统登录时使用图片验证码验证登录效果： ![97cb7cdf761348639c5df974e66bd751.jpg][] 使用 4 位数字加字母组合验证码登

妖狐艹你老母/ 2022年08月28日 01:47/ 0 赞/ 310 阅读

相关登录验证码

验证码的作用是区分人与机器，防止机器刷数据；验证码的验证分了两步，一步是请求获取验证码，一步是前台传的验证码与后台的验证码进行对比判断后进行后续操作；在MyEclips

我就是我/ 2022年07月12日 03:38/ 0 赞/ 337 阅读

相关登录验证码的实现

前言：验证码，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的

左手的ㄟ右手/ 2022年05月17日 03:04/ 0 赞/ 327 阅读

相关 java后台生成验证码，前端验证登录

后台生成验证码，前端验证登录页面逻辑：一、当登录页面加载的时候，就要把生产好的验证码图片显示在页面上。二、点击验证码图片可以去刷新图片（页面不刷新）。三

阳光穿透心脏的1/2处/ 2022年03月12日 04:14/ 0 赞/ 352 阅读

相关前端随机验证码

[前端随机验证码 ][Link 1] 前端登录或者注册的时候经常会有一个验证码，数字或者字母，本验证码是基于canves的。使用方法： <!DOCTY

蔚落/ 2021年09月02日 05:12/ 0 赞/ 478 阅读

相关登录(实时验证手机格式、验证码)

思路: 动态验证手机号格式: 利用计算属性会根据内容的变化而调用的特点,将表单绑定v-model，在计算属性中,利用正则不断检验手机格式,

迷南。/ 2021年07月24日 19:21/ 0 赞/ 483 阅读