vue登录获取验证码

<el-form-item label="验证码" prop="imgcode"><el-inputtype="password"v-model="ruleForm.imgcode"autocomplete="off"></el-input></el-form-item><el-form-item prop="imgcode"><img :src="img" @click="imgFn" alt="" /></el-form-item>

首先要写一个input输入框，用来输入验证码，prop给想对应的字段，下面跟着img标签用来显示验证码的图片

img: "http://bw.gsruiying.com.cn/adminapi/captcha_pro?1608801075000",

在vue模板当中return里面定义一个中间变量img，用来做默认打开页面显示和点击切换验证码的效果

created() {this.img ="http://bw.gsruiying.com.cn/adminapi/captcha_pro?1608801075000" + new Date() * 1;},

在vue生命周期created或者mounted中使用定义的中间变量img接收默认的验证码图片，使用字符串拼接时间戳new Date()，页面就会出现一个默认的验证码

<el-form-item prop="imgcode"><img :src="img" @click="imgFn" alt="" /></el-form-item>

给图片添加点击事件@click

imgFn() {this.img ="http://bw.gsruiying.com.cn/adminapi/captcha_pro?1608801075000" + new Date() * 1;}

把点击事件方法写在vue生命周期methods里面，使用字符串拼接时间戳new Date()，这时点击图片会随机切换验证码的图片

vue登录获取验证码相关推荐

2022.9.17 vue、element-ui实现登录获取手机验证码，进行手机号校验、验证码CD60秒
一.实现效果: 1.直接点击,不为空校验 2.输入手机号格式不正确时 3.获取完验证码进行读秒二.页面html <el-formclass="phone-form"ref= ...
Vue 登录手机号、密码格式验证及验证码60s获取
直接上代码: <el-input v-model="phoneRegister" placeholder="请输入手机号"> </el-inp ...
Vue - 实现获取手机验证码倒计时 60 秒（手机号+验证码登录功能）
前言网上的大部分获取验证码逻辑的例子,代码多还不健壮,本文将用最少的代码实现相同的功能. 当点击获取验证码按钮时,会自动进入倒计时,同时按钮无法点击, 您可以自定义倒计时时间,如下图所示: 这块由于 ...
前端获取验证码、手机号登录、注册功能
07.前端获取验证码.手机号登录.注册功能 Register.vue <template><div class="register"><div cla ...
SpringSecurity+Vue：实现添加登录图片验证码
第一步,准备一个可以生成验证码的类或者jar包,我这里就用工具类了,网上随便找的一个工具类 /*** 生成图片验证码的工具类*/ public class VerifyCode {private in ...
ElementUI+VUE获取验证码前端代码
本期带来vue项目的获取验证码按钮以及一个定时任务可以和我上期发的SpringBoot项目发现验证码一起配合使用 vue + elementUI项目使用 1.首先是前端的方法部分 send () { ...
vue.js项目实战运用篇之抖音视频APP-第十一节：注册登录及验证码功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue实现手机验证码登录（基于娱乐系统项目）
登录逻辑: 1 验证手机号码输入框,分别判断以下情况并作出弹窗警告 (1:是否为空 (2:是否为11位数字 (3:是否是13,15, 17, 18开头的正确手机号码 2 输入框下面添加一个获取验证码的 ...
前端Vue实现手机号验证码登录（60s禁用倒计时）
这篇文章主要介绍了Vue实现手机号验证码登录(60s禁用倒计时),帮助大家更好的理解和使用vue,具有很好的参考价值,感兴趣的朋友可以了解下最近做了个vue项目,前端通过手机号验证码的方式登录,获取 ...

vue登录获取验证码

vue登录获取验证码相关推荐

最新文章

热门文章