Vue项目登录页实现获取短信验证码的功能

百思不得小李

已于 2024-04-01 14:52:01 修改

阅读量932

点赞数 1

分类专栏： JS实战记录 vue2实战记录文章标签： vue.js 前端 javascript

于 2024-04-01 14:25:22 首次发布

本文链接：https://blog.csdn.net/qq_37635012/article/details/137231408

版权

vue2实战记录同时被 2 个专栏收录

73 篇文章 10 订阅 ¥99.90 ¥99.00

订阅专栏

超级会员免费看

JS实战记录

62 篇文章 2 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

之前我们写过不需要调后端接口就获取验证码的方法，具体看《无需后端接口，用原生js轻松实现验证码》这个文章。现在我们管理后台有个需求，就是登录页面需要获取验证码，用户可以输入验证码后进行登录。效果如下，当我点击获取验证码后能获取短信验证码：
在这里插入图片描述

这里在用户点击获取验证码后，先校验是否输入了正确的手机号，输入正确后调接口获取验证码，主要代码如下：

   <el-input
              v-else
              size="medium"
              v-model.trim="formParams.phone"
              type

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

百思不得小李

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue项目登录页实现获取短信验证码的功能

现在我们管理后台有个需求，就是登录页面需要获取验证码，用户可以输入验证码后进行登录。之前我们写过不需要调后端接口就获取验证码的方法，具体看。
复制链接

扫一扫

专栏目录

订阅专栏

Vue - 实现获取手机验证码倒计时 60 秒（手机号+验证码登录功能）

王佳斌

07-01

5025

当点击获取验证码按钮时，会自动进入倒计时，同时按钮无法点击，您可以自定义倒计时时间，如下图所示：这块由于方便您观察，暂时设置成了 10 秒。您可以随便找个干净的页面，直接运行即可。样式的话，您可以根据需求自己来写。实现获取验证码的倒计时功能，获取手机验证码倒计时。......

vue 实现通过手机发送短信验证码注册功能

01-21

效果如下：代码如下： template代码：手机注册 <el-input type=text v-model.number=ReginForm.tel placeholder=手机号码

参与评论您还未登录，请先登录后发表或查看评论

vue 获取验证码

m0_46701899的博客

08-31

1163

【代码】vue 获取验证码。

基于Vue的验证码实现

最新发布

游王子的博客

05-19

378

其中icon_light.png图标图片如下，其他img.jpg图片可以是任意图片。

vue 获取短信验证码

leng0920的博客

08-10

983

<template> <div id="fuxinRecharge" class="elementui-add-common-sty"> <div class="container"> <div class="page-content"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> .

SpringMvc框架使用过滤器（Filter）实现跨域

MoncyXu的博客

12-17

2240

@WebFilter(filterName = "CrosFilter",urlPatterns = {"/*"}) public class CrosFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } ...

vue--获取手机短信验证码

weixin_45102212的博客

01-20

1874

1、初始化秒： return { //初始值 show: 'false', count: '', } 2、页面中： <el-form-item prop="code" label="短信验证码"> <el-input v-model.trim="form.code" style="width:60%" maxlength="6" oninput="value=value.replace(/[

vue获取验证码

Mr.H_小海

06-26

1177

vue获取验证码HTML部分JS部分登录界面使用手机验证码注册登录很常见，VUE中实现获取验证码倒计时还是用到定时器setInterval HTML部分 <div class="login_list"> <span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode"...

vue获取手机验证码

06-10

381

正则 1.文本框仅可输入身份证后六位 <input type="text" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" maxlength="6" > 验证码 <div id="verifyCode"> <div class="inputCode"> <span>验证码</span&g...

vue登录获取验证码

qq_45838119的博客

05-08

991

<el-form-item label="验证码" prop="imgcode"> <el-input type="password" v-model="ruleForm.imgcode" autocomplete="off" ></el-input> </el-form-item> <el-form-item prop="imgcode"

Vue实现发送短信验证码

05-09

此资源主要是vue实现通过发送短信验证码进行登录，其中的密钥需要自己去sms平台进行申请.

vue实现登录页面的验证码以及验证过程解析(面向新手)

10-16

主要介绍了vue实现登录页面的验证码以及验证过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

Vue.js实现移动端短信验证码功能

12-29

现在的短信验证码一般为4位或6位，则页面中会相应的显示4个或6个文本框，如图所示当点击注册进入到输入验证码页面的时候，第一个框自动获取光标，依次输入，不可直接输入第三个或第四个框的值， input输入框是循环...

使用Vue 实现滑动验证码功能

10-16

本文章主要来介绍一下第一个阶段，也就是前端校验的验证码的实现，下面来介绍一下拖动验证码的具体实现。这篇文章主要介绍了利用 Vue 实现滑动验证码,需要的朋友可以参考下

基于vue实现图片验证码倒计时60s功能

10-15

在Vue.js框架中实现图片验证码倒计时60秒功能是一项常见的前端开发任务，它涉及到用户验证、用户体验以及页面交互等多个方面。以下将详细介绍如何在Vue项目中完成这个功能。首先，我们需要创建一个HTML结构来展示...

Vue 2实现验证码倒计时

前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！

02-29

943

以下是一个简单的示例，演示如何在Vue 2组件中实现获取验证码后的60秒倒计时。如果正在倒计时，则不会执行获取验证码的操作。否则，会开始倒计时，并每秒更新。当点击“获取验证码”按钮时，会执行。当倒计时结束时，会重置。在Vue 2中，你可以使用。在这个示例中，我们使用了。来标记是否正在倒计时，的值，并清除定时器。

Vue3问题：如何实现短信验证码登录？前后端！

m0_74802419的博客

11-08

2681

点击发送验证码按钮，获取手机短信验证码。此时，发送验证码按钮进入倒计时状态，且不可被点击。成功获取到短信验证码并输入，点击登录按钮，完成页面跳转。

vue中获取短信验证码交互功能快速开发代码整理

羽筠的博客

04-29

163

vue中获取短信验证码交互功能快速开发代码整理父组件相关代码： HTML：

vue实现获取验证码倒计时

卜卦的博客

10-24

373

HTML <div @click="getCode" class="getCode"> <span v-show="show" @click="getCode">| 获取验证码</span> <span v-show="!show" class="count">| {{count}} s</span&gt...

Vue 实现输入框短信验证码功能

05-10

实现输入框短信验证码功能，可以使用 Vue.js 的模板语法和组件化思想，具体实现步骤如下： 1. 创建一个包含输入框和发送验证码按钮的组件。 ```html <template> <div> <input type="text" v-model="code" /> <button @click="sendCode" :disabled="disabled">{{ buttonText }}</button> </div> </template> <script> export default { data() { return { code: '', disabled: false, buttonText: '发送验证码', countdown: 60 } }, methods: { sendCode() { // 发送短信验证码 // ... // 设置倒计时 this.disabled = true; this.buttonText = `${this.countdown}s 后重新发送`; const timer = setInterval(() => { this.countdown--; this.buttonText = `${this.countdown}s 后重新发送`; if (this.countdown === 0) { clearInterval(timer); this.disabled = false; this.buttonText = '发送验证码'; this.countdown = 60; } }, 1000); } } } </script> ``` 2. 在父组件中引入该组件，并监听子组件的输入事件。 ```html <template> <div> <sms-code @input="handleInput" /> <button @click="submit">提交</button> </div> </template> <script> import SmsCode from './SmsCode.vue'; export default { components: { SmsCode }, data() { return { phone: '', code: '' } }, methods: { handleInput(value) { this.code = value; }, submit() { // 提交表单 // ... } } } </script> ``` 在子组件中，使用 `v-model` 来实现与父组件的双向数据绑定。当输入框的值发生变化时，通过 `$emit` 方法将新的值传递给父组件。 ```html <template> <div> <input type="text" v-model="code" @input="$emit('input', code)" /> <button @click="sendCode" :disabled="disabled">{{ buttonText }}</button> </div> </template> <script> export default { data() { return { code: '', disabled: false, buttonText: '发送验证码', countdown: 60 } }, methods: { sendCode() { // 发送短信验证码 // ... // 设置倒计时 this.disabled = true; this.buttonText = `${this.countdown}s 后重新发送`; const timer = setInterval(() => { this.countdown--; this.buttonText = `${this.countdown}s 后重新发送`; if (this.countdown === 0) { clearInterval(timer); this.disabled = false; this.buttonText = '发送验证码'; this.countdown = 60; } }, 1000); } } } </script> ``` 这样就可以实现一个简单的输入框短信验证码功能了。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交