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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/508995.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何利用Geoserver将矢量数据发布成伪3D服务

目录 1.1、前言1.2、伪3D服务效果图1.3、数据准备1.4、基本原理1.5、完整的样式文件1.6、Geoserver中的操作 1.1、前言 本篇文章需要的Geoserver环境&#xff0c;Geoserver的情况请参考博文Geoserver简介、Geoserver安装部署操作请参考博文Geoserver安装部署、Geoserver基本操作…

初识CSS

目录 前言&#xff1a; CSS的介绍&#xff1a; CSS的发展&#xff1a; 1&#xff09;CSS1.0&#xff1a; 2)CSS2.0: 3)CSS2.1: 4&#xff09;CSS3&#xff1a; CSS特点&#xff1a; 1&#xff09;丰富的样式定义&#xff1a; 2&#xff09;易于设置和修改&#xff1a; 3&…

Datacom HCIP笔记-ISIS协议

IS中间系统&#xff08;路由器/运行了ISIS协议的设备&#xff09; ES终端系统(PC,PAD,print) 网络功能模型 ISO定义 事实标准 OSI TCP/IP 网络层(CLNP) (IS-IS) 网络…

代码随想录算法训练营第39天|62.不同路径 |63. 不同路径 II

代码随想录算法训练营第39天|62.不同路径 |63. 不同路径 II 详细布置 62.不同路径 本题大家掌握动态规划的方法就可以。 数论方法 有点非主流&#xff0c;很难想到。 https://programmercarl.com/0062.%E4%B8%8D%E5%90%8C%E8%B7%AF%E5%BE%84.html 视频讲解&#xff1a;https…

linux编辑器——vim使用方法

文章目录 linux编辑器——vim使用方法1. vim的基本概念2. vim的基本操作3. vim正常模式命令集4. vim末行模式命令集5. vim操作总结6.简单vim配置7.参考资料 linux编辑器——vim使用方法 vi/vim的区别简单点来说&#xff0c;它们都是多模式编辑器&#xff0c;不同的是vim是vi的…

配置 施耐德 modbusTCP 分布式IO子站 RPA0100

1. 总体步骤 2. 软件组态&#xff1a;在 Unity Pro 软件中创建编辑 PRA 模块工程 2.1 新建项目 模块箱硬件型号如下 点击 Unity Pro 软件左上方【新建】按钮&#xff0c;选择正确的 DIO 模块型号、背板型号 2.2 模块组态 2.2.1 拖拽添加模块 双击【配置】菜单下的【0&…

理解 SQL 数据添加:从基础到实践

引言&#xff1a; 在现代软件开发中&#xff0c;数据库是不可或缺的一部分。而 SQL 作为结构化查询语言的代表&#xff0c;广泛应用于数据库管理系统中&#xff0c;为我们提供了强大的数据管理和查询能力。 主题&#xff1a; 我们将从基础的 SQL INSERT INTO 语句开始&…

基于FPGA的HDMI方块移动程序设计

前面写了一篇关于HDMI视频接口的文章《基于FPGA的HDMI视频接口的设计》&#xff0c;该文章对HDMI的相关知识点做了讲解&#xff0c;这里不再重复&#xff0c;本篇文章直接实现一个简单功能-方块的移动。 该系统程序主要实现的功能就是通过串口下发指令控制方块的位置移动&…

使用CMake搭建简单的Qt程序

目录结构 代码 CMakeLists.txt&#xff1a; cmake_minimum_required(VERSION 3.15)set(CMAKE_AUTOUIC ON) set(CMAKE_AUTOMOC ON) set(CMAKE_AUTORCC ON)# set the project name project(xxx)# 设置Qt的路径 # 例如 E:/Qt/Qt/aaa/msvc2019_64 # aaa 为Qt的版本号 set(QT_PATH…

LCD TP触摸屏调试方法

一、硬件连接 I2C总线&#xff1a;I2C-SDA和i2C-SCL 中断信号&#xff1a;touch-gpio 复位信号&#xff1a;reset-gpio 电源信号&#xff1a;power-gpio 二、驱动调试 2.1 确认从设备地址 在给TP供电正常后&#xff0c;检测其I2C设备从地址&#xff0c;或者通过datashee…

怎么在UE游戏中加入原生振动效果

我是做振动触感的。人类的五感“视听嗅味触”&#xff0c;其中的“触”就是触觉&#xff0c;是指皮肤、毛发与物体接触时的感觉。触感可以带来更加逼真的沉浸式体验。但也许过于司空见惯&#xff0c;也是习以为常&#xff0c;很多人漠视了触感的价值。大家对触感的认知还远远不…

Suno音乐创作新时代:从歌词到MV的完整制作全流程

朋友们&#xff0c;期待已久的Suno直播分享终于来了&#xff01; 墨云首秀&#xff0c;本场直播全程只讲干货&#xff01;拒绝任何废话! 主要围绕下面六个主题分享: 如何快速撰写原创歌词&#xff1f;我将直接给大家分享我的歌词创作提示词以及使用技巧。 Suno歌词结构最佳实践…

Python反爬案例——验证码的识别

验证码的识别 使用打码平台识别验证码 利用打码平台可以轻松识别各种各样的验证码&#xff0c;图形验证码、滑动验证码、点选验证码和逻辑推理验证码。打码平台提供了一系列API&#xff0c;只需要向API上传验证码图片&#xff0c;它便会返回对应的识别结果。 使用超级鹰平台…

[win10]工具软件之HxD免费软件--把yuv图片数据保存成十六进制数组数据头文件

工具软件之HxD免费软件–把yuv图片数据保存成十六进制数组数据头文件 HxD把yuv图片数据保存成十六进制数组数据头文件 嵌入式ai算法集成测试时&#xff0c;经常需要对视频或者图片进行回灌挂测测试看算法效果。有些嵌入式设备不支持把数据导入到设备中&#xff0c;没有网络&a…

基于arkTS开发鸿蒙app应用案例——通讯录案例

1.项目所用技术栈 arkTS node.js express mongoDB 2.效果图 3.源码 Index.ets&#xff08;登录页&#xff09; 登陆时让前端访问数据库中已经存好的账号密码&#xff0c;如果可以查询到数据库中的数据&#xff0c;则账号密码正确&#xff0c;登录成功&#xff0c;否则登录…

Vue项目中引入html页面(vue.js中引入echarts数据大屏html [静态非数据传递!] )

在项目原有vue&#xff08;例如首页&#xff09;基础上引入html页面 1、存放位置 vue3原有public文件夹下 我这边是新建一个static文件夹 专门存放要用到的html文件 复制拖拽过来 index为html的首页 2、更改路径引入到vue中 这里用到的是 iframe 方法 不同于vue的 component…

springCloudAlibaba集成gateWay实战(详解)

一、初识网关&#xff1f; 1、网关介绍 ​ 在微服务架构中&#xff0c;一个系统会被拆分为很多个微服务。那么作为客户端要如何去调用这么多的微服务呢&#xff1f;如果没有网关的存在&#xff0c;我们只能在客户端记录每个微服务的地址&#xff0c;然后分别去调用。这样的话…

3D DRAM在2025年来袭

4月1日消息&#xff0c;据半导体工程报道&#xff0c;在行业大会Memcon 2024上&#xff0c;三星电子宣布其计划成为首家在2025年后步入3D DRAM内存时代的行业领军者。随着DRAM内存行业在本十年后期将线宽压缩至低于10纳米&#xff0c;现有的设计解决方案在如此精细的尺度上难以…

渗透测试练习题解析 5(CTF web)

1、[安洵杯 2019]easy_serialize_php 1 考点&#xff1a;PHP 反序列化逃逸 变量覆盖 【代码审计】 通过 GET 的方式获取参数 f 的值&#xff0c;传递给变量 function 定义一个过滤函数&#xff0c;过滤掉特定字符&#xff08;用空字符替换&#xff09; 下面的代码其实没什么用…

【Android Studio3.5.2安装以及错误错误解决】

前言 下面是博主在安装Android studio时遇到的一些问题&#xff0c;并且花费很长时间寻找解决方法&#xff0c;经过了血和泪的教训下面将自己在安装过程中遇到的查看的资料贴出来&#xff08;感谢各位大佬的文章帮助本闲狗解答疑惑&#xff0c;此处贴出原文链接&#xff0c;如…