ElementUI+VUE获取验证码前端代码

本期带来vue项目的获取验证码按钮以及一个定时任务

可以和我上期发的SpringBoot项目发现验证码一起配合使用

vue + elementUI项目使用

1、首先是前端的方法部分

    send () { // 点击发送验证码if (!this.rest) {if (this.email === '') {this.myMessage('error', '请输入邮箱')} else {this.count = TIME_COUNTthis.show = falsethis.$axios.get('跨域请求地址').then(res => {if (res.data.flag) {this.myMessage('success', '获取成功')} else {this.myMessage('error', '发送失败请重试')}}).catch(err => {console.log(err)})this.rest = setInterval(() => {if (this.count > 0 && this.count <= TIME_COUNT) {this.count--} else {this.show = trueclearInterval(this.rest) // 清除定时器this.rest = null}}, 1000)}}},myMessage (type, message) { // 弹窗提示this.$message({message: message,type: type})}

2、data部分（用来给input设置默认值）

  data () {return {email: '',yzm: ''}}

2.1、script中加一个参数

const TIME_COUNT = 60 // 更改倒计时时间s

3、显示代码部分

按钮以及输入框

<el-input class="inputVa" v-model="email" placeholder="请输入登录邮箱"></el-input><el-input class="inputVa" style="width:160px" v-model="yzm" placeholder="请输入验证码"></el-input><el-button @click="send" type="success" :disabled="!show" style="width:140px">获取验证码
<span v-show="!show" style="font-size:5px" class="count">({{count}}s)</span></el-button>

有异常可以评论区讨论！！！！

ElementUI+VUE获取验证码前端代码相关推荐

【VUE】使用elementUI制作获取验证码组件
使用elementUI-[表单验证]的表单,在此基础上进行修改,达到自己需要的样式 eleUI原版代码如下自行修改需要的样式 <el-form :model="ruleForm&qu ...
vue 获取验证码倒计时组件
之前写过一个计时函数,有计算误差,但是验证码的60秒倒计时可以忽略这一点点误差.直接上代码. <template><div class="captcha-row" ...
Vue 获取验证码60s倒计时方法
HTML: <div class="item"><input type="text" v-model="phone" pl ...
vue 获取验证码按钮，点击后开始倒计时
第一步 data() {return {disableCode: false,getCode: this.$t('login.obtaining'), // 按钮显示的内容isGeting: fals ...
ionic 之获取验证码
ionic 之获取验证码 html代码 <button ion-button clear [disabled]="disabled" (click)="getId ...
vue element-ui 手机号校验验证码校验获取验证码倒数60秒无样式实现
这段时间被迫搞前端搞裂开了,记录一下手机号验证码校验登录的极简无样式前端实现巨丑!希望大佬们不介意下面是先演示效果点击登陆后显示校验信息输入手机号点击获取验证码输入符合校验的内容后点击登录提 ...
vue element-ui实现获取短信验证码 ,60秒倒计时及页面
cc废话不多说先上效果图 vue页面布局 <el-form-item prop="phoneCode" class="pr"><el-inp ...
基于Vue的校园资源管理系统(前端代码)
基于Vue的校园资源管理系统(前端代码) 作者:Jackshijin 项目背景这是本人在毕业的时候选择的毕业设计方向,指导老师团队的课题有小程序.安卓开发.机器学习和嵌入式,而我选择了Web...因 ...
前端案例：简易登录表单的制作，包括用户名、密码、随机验证码（代码完整，复制即用）
案例效果本案例基于 vue.js 和 Element UI 实现.随机验证码采用 DOM 操作和 canvas 绘制,可随机生成和刷新:后续程序逻辑直接填入方法即可. Element UI 下载安 ...

ElementUI+VUE获取验证码前端代码

ElementUI+VUE获取验证码前端代码相关推荐

最新文章

热门文章