Vue-element重新发送验证码

最新推荐文章于 2024-07-15 16:23:39 发布
最新推荐文章于 2024-07-15 16:23:39 发布
阅读量1.7k 收藏
点赞数
分类专栏： element-Ui 文章标签： 重新发送验证码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33350717/article/details/84580195
版权
重新发送验证码

在开发中，重新发送验证码是登陆注册必不可少的一个功能。通过element-ui两个属性可以轻松实现，重新发送验证码不可点击的状态。

第一种 loading

通过给loading设置布尔值来实现不可点击的状态。loading为正在加载中，此时button不可点击

<el-button ：loading="true">重新发送验证码</el-button>
第二种 disabled
<el-button :disabled="true">重新发送验证码</el-button>

两种方式 同样的操作来实现。

前端小泰迪
关注
专栏目录
vue-element-admin 框架的动态路由，图形验证码和权限管理的前端的实现（注意只是前端,api接口没写）
weixin_43780179的博客
11-17 1338
vue-element-admin 框架的动态路由，图形验证码和权限管理的前端的实现（注意只是前端）
vue-element-admin+Axios跨域请求session不一致问题
Jancoyan
10-17 750
vue-element-admin+Axios跨域请求session不一致问题 场景复现 前端：Vue-Cli + Axios + Node.js + vue-element-admin 后端：Spring Boot 数据库：MySQL + Redis 在做用户注册的验证码功能的时候，前端发起请求，后端生成验证码图片发送到前端，并将验证码字符串存放到session中，但是在前端输入表单发送注册请求的时候，一直显示注册失败，通过调试发现两次请求的SessionID不同。 解决步骤 设置proxy代理（
Vue实现发送短信验证码
05-09
此资源主要是vue实现通过发送短信验证码进行登录，其中的密钥需要自己去sms平台进行申请.
vue使用element发送手机验证码倒计时
weixin_46700289的博客
03-11 1797
发送验证码倒计时 html <el-form class="form" :model="form" labeal-position="left"> <el-form-item label="姓名"> <el-input v-model="form.Name" placeholder="请输入姓名"></el-input> </el-form-item> <el-form-ite
Vue 3和Element Plus实现的仿App输入手机验证码功能的组件
最新发布
jyl4855的博客
07-15 487
【代码】Vue 3和Element Plus实现的仿App输入手机验证码功能的组件。
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
10-18
在登入页面，我们往往需要通过输入验证码才能进行登入，那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能,需要的朋友可以参考下
vue element-ui实现获取短信验证码 ,60秒倒计时及页面
qq_46058838的博客
03-20 2387
【代码】vue element-ui实现获取短信验证码 ,60秒倒计时及页面。
vue+element 获取验证码
weixin_30343157的博客
06-26 1716
我们在做一个项目，登录注册页面是少不了的，为了人机校验，验证码也是必须的 我的这个项目获取验证码，前端发送一个随机四位数给后端，后端返回一张图片，前端渲染就可以 template代码： 1 <el-form-item label="" prop="captcha_code"> 2 <el-input 3 v-model="loginForm.capt...
vue-demo:一些实用的vue+element组件功能
04-23
5. vue页面打印功能 PDF预览 图形编辑 1. 图形旋转,平移,缩放 2. 页面多个upload上传文件 表格 1. 树形表格 2. 可编辑验证表格 3. 表格selection属性相关 4. 动态表格数据合并 项目截图 (截图是之前截的,后面更新的...
基于vue-element-admin的，并且需要配合jeeweb的前后端分离模块一起开发模块
11-16
在本项目中，我们主要探讨的是一个基于Vue和Element UI的前端管理模板——vue-element-admin，与后端的Java框架Jeeweb相结合，构建一个完整的前后端分离的Web应用程序。这个开发平台充分利用了现代Web技术栈，实现了...
vue+element 实现点击复制验证码 (an按步骤操作复制就能用)
xu_duo_i的博客
11-11 479
vue+element 实现点击复制验证码 (an按步骤操作复制就能用) 复制激活码
element框架实现的登录界面
04-20
有两个输入框和一个提交按钮，一个输入用户名，另一个输入密码，点击提交按钮后发起一个 post 请求到 http://www.baidu.com
vue+element实现手机号验证码注册
D_evin_的博客
01-25 4739
很全的PC端手机端适配！一个项目多个域名我试了代理跨域本地运行可以打包上传不行，然后就用全地址，后端哪里要设置域名白名单！直接上图和完整代码！觉得可以就点个赞吧，谢谢！ 代码： <template> <div> <div class="register_box"> <div class="icon1" onClick="window.location.href='/'"&g...
使用Vue+ElementUI实现的手机验证码校验、倒计时和禁用效果
年少不知曲中意,再听已是曲终人
05-31 1963
使用Vue+ElementUI实现小姑手机验证码的校验、倒计时和禁用效果
2022.9.17 vue、element-ui实现登录获取手机验证码，进行手机号校验、验证码CD60秒
xiaoxiaocainiao_的博客
09-17 2395
1、进行手机号校验关键在对单个手机号输入框进行校验，需要使用到validateField对部分表单字段进行校验，valid是校验完的提示信息，当valid为空时代表校验成功2、读秒和设置禁用，在校验成功时设置一个60s计时器，读秒过程禁用按钮，用了element-ui的按钮组件，在读秒过程中给按钮增加disabled属性；读秒过程结束，解除按钮禁用。
Vue3问题：如何实现短信验证码登录？前后端！
m0_74802419的博客
11-08 3310
点击发送验证码按钮，获取手机短信验证码。此时，发送验证码按钮进入倒计时状态，且不可被点击。 成功获取到短信验证码并输入，点击登录按钮，完成页面跳转。
【VUE】使用elementUI制作获取验证码组件
SZnAl的博客
04-27 3460
使用elementUI-【表单验证】的表单，在此基础上进行修改，达到自己需要的样式 eleUI原版代码如下 自行修改需要的样式 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.nam
VUE：el-button里面的倒计时显示，验证码发送后两分钟倒计时
YiDabing9的博客
07-05 752
sendDisabled ：代表该button被禁用了，当它禁用和未禁用的时候有两种样式。sendDisabledStyle ：这是禁用的样式，就是灰色+120s倒计时的组合样式。发送验证码后，2分钟内不可以在发送，button置灰，120s后可以点击重新发送验证码。verificationScanCode-closeBtn：这是未禁用的样式。具体样式要根据当前布局调整。
Vue 实现登录界面 验证码
qq_40320637的博客
01-02 6128
登录界面 SIdentify 创建验证码组件，实现绘画出图片验证码` <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </te...
vue-element-admin登录功能具体实现详解
03-29
Vue-Element-Admin是一个基于Vue.js和Element UI的后台管理系统模板，主要包括用户管理、权限管理、菜单管理、角色管理、日志管理等功能模块。其中，登录功能是系统的核心功能之一，下面详细介绍Vue-Element-Admin登录功能的具体实现。 1. 登录页面 登录页面是用户登录系统的入口，需要提供用户名和密码输入框、验证码输入框和登录按钮。在Vue-Element-Admin中，登录页面的实现主要包括以下几个部分： （1）路由配置：在路由配置文件（router/index.js）中添加登录页面的路由配置。 （2）页面布局：使用Element UI中的布局组件实现登录页面的布局。 （3）表单验证：使用Vue.js中的表单验证功能验证用户名、密码和验证码的输入合法性。 （4）登录请求：使用axios库向后台发送登录请求，验证用户的登录信息是否正确。 （5）登录状态保存：将登录成功后返回的token保存在本地，供后续请求时使用。 2. 登录请求 在Vue-Element-Admin中，登录请求是通过axios库发送的。axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js平台。在发送登录请求时，需要设置请求的URL、请求方法、请求头和请求体等参数。 以下是发送登录请求的代码示例： ```javascript import axios from 'axios' export function login(username, password, code, uuid) { const data = { username, password, code, uuid } return axios({ url: '/auth/login', method: 'post', headers: { 'Content-Type': 'application/json;charset=UTF-8' }, data }) } ``` 在上述代码中，login函数接收四个参数，分别是用户名、密码、验证码和UUID。其中，UUID是用于生成验证码的唯一标识符。login函数返回一个Promise对象，该对象的then方法用于处理登录成功后的逻辑，catch方法用于处理登录失败后的逻辑。 3. 登录状态保存 在Vue-Element-Admin中，登录状态是通过Vuex库保存的。Vuex是一个专为Vue.js应用程序开发的状态管理模式，可以用于集中管理应用程序中的所有组件的状态。 在登录成功后，后台会返回一个token，该token需要保存在本地，以便后续请求时使用。以下是保存登录状态的代码示例： ```javascript import { login } from '@/api/user' import { setToken } from '@/utils/auth' const state = { token: '' } const mutations = { SET_TOKEN: (state, token) => { state.token = token } } const actions = { login({ commit }, userInfo) { const { username, password, code, uuid } = userInfo return new Promise((resolve, reject) => { login(username, password, code, uuid).then(response => { const { data } = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) } } ``` 在上述代码中，login函数接收一个userInfo对象作为参数，该对象包含用户名、密码、验证码和UUID等信息。login函数返回一个Promise对象，该对象的then方法用于处理登录成功后的逻辑，catch方法用于处理登录失败后的逻辑。 4. 登录状态验证 在Vue-Element-Admin中，登录状态验证是通过路由拦截实现的。路由拦截是Vue.js中的一种权限控制方式，可以在路由跳转前对用户的登录状态进行验证，从而实现页面的权限控制。 以下是路由拦截的代码示例： ```javascript import router from './router' import { getToken } from '@/utils/auth' const whiteList = ['/login'] router.beforeEach(async(to, from, next) => { const hasToken = getToken() if (hasToken) { if (to.path === '/login') { next({ path: '/' }) } else { next() } } else { if (whiteList.indexOf(to.path) !== -1) { next() } else { next(`/login?redirect=${to.path}`) } } }) ``` 在上述代码中，beforeEach函数用于路由拦截，该函数接收三个参数，分别是要跳转的路由对象、当前路由对象和next函数。在beforeEach函数中，首先获取本地的token，如果token存在，则跳转到要访问的路由页面，否则跳转到登录页面。如果要访问的路由页面在白名单中，则直接跳转到该页面，否则跳转到登录页面，并将要访问的页面作为参数传递给登录页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值