vue实现短信验证码登录功能（流程详解）_短信验证码登录登录已阅读并同意以下协议淘宝平台服务协议、隐私权政策、法 - CSDN文库

短信验证码

1.8k 浏览量更新于2023-05-28 评论 1 收藏 66KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue实现短信验证码登录功能（流程详解）实现短信验证码登录功能（流程详解）

无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能，输入手机号，得到验证码，最后先服务器发送

请求，保存登录的信息，一个必不可少的功能

思路思路

1，先判断手机号和验证是否为空，

2，点击发送验证码，得到验证码

3，输入的验证码是否为空和是否正确，

4，最后向服务发送请求

界面展示界面展示

1.准备工作

这个会对input进行封装处理

<template>

<div class="text_group">

<div class="input_group" :class="{'is-invalid': error}">

<input

:type="type"

:placeholder="placeholder"

:value="value"

:name="name"

@input="$emit('input',$event.target.value)"

>

<button v-if="btnTitle" @click="$emit('btnClick')" :disabled="disabled">{{btnTitle}}</button>

</div>

<div v-if="error" class="invalid-feedback">{{error}}</div>

</div>

</template>

<script>

export default {

name:"inputGroup",

props:{

type: {

type: String,

default: "text"

},

placeholder:String,

value:String,

name:String,

disabled:Boolean,

btnTitle:String, //input框中的文字

error:String //验证不正确提示

}

}

</script>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38659311

粉丝: 5
资源: 893

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈