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


Posted in Javascript onDecember 10, 2019

无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能,输入手机号,得到验证码,最后先服务器发送请求,保存登录的信息,一个必不可少的功能

思路

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

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

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

4,最后向服务发送请求

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

界面展示

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>

input组件封装完之后在我们这个login组件中引入并注册

import InputGroup from '../components/InputGroup'引入封装的组件

最后在components注册

data() {
 return {
  phone:"", //手机号
  verifyCode:"", //验证码
  btnTitle:"获取验证码",
  disabled:false, //是否可点击
  errors:{}, //验证提示信息
 }
 }

<template>
 <div class="login">
  <!-- 手机号 -->
  <InputGroup
   type="number"
   placeholder="手机号"
   v-model="phone" 
   :btnTitle="btnTitle"
   :disabled="disabled"
   :error="errors.phone"
   @btnClick="getVerifyCode"
  />
  <!-- 输入验证码 -->
  <InputGroup
   type="number"
   v-model="verifyCode"
   placeholder="验证码"
   :error="errors.code"
  />
  <!-- 登录按钮 -->
 



 <div class="login_btn">
   <button @click="handleLogin" :disabled="isClick">登录</button>
  </div>
 </div>
 </template>

2.判断手机号是否正确和合法

(1)点击验证码发送验证的时候,必须符合手机号正确和手机号码不能为空,短信发送服务用的是《聚合数据》,申请可以免费调用10次

getVerifyCode(){

//获取验证码
if(this.validatePhone()) {
 this.validateBtn()
 //发送网络请求
 this.$axios.post('/api/posts/sms_send',{<br>


//注册聚合数据找到短信api服务,申请会得到两个tpl_id和key值,然后填入相对应的就行,具体还是和你门后端进行沟通
  tpl_id: "",
    key: "",
  phone:this.phone
 }).then(res => {
  console.log(res)
 })
 }<br>},

2.1点击发送验证码的时候判断是否合法

validatePhone(){
 //判断输入的手机号是否合法
 if(!this.phone) {
 this.errors = {
 phone:"手机号码不能为空"
 }
 // return false
 } else if(!/^1[345678]\d{9}$/.test(this.phone)) {
 this.errors = {
 phone:"请输入正确是手机号"
 }
 // return false
 } else {
 this.errors ={}
 return true
 }
},

2.2点击验证码发送倒计时

validateBtn(){
 //倒计时
 let time = 60;
 let timer = setInterval(() => {
 if(time == 0) {
 clearInterval(timer);
 this.disabled = false;
 this.btnTitle = "获取验证码";
 } else {
 this.btnTitle =time + '秒后重试';
 this.disabled = true;
 time--
 }
 },1000)
},

3.点击登录实现

3.1点击登录之前手机已经发送验证密,并且手机上以及获取到正确的验证码,登录之前需要判断,手机号和验证码都不能为空,所以在计算属性判断是否两个都为空,如果都不为空的话,可以点击按钮,否则不能点击按钮

computed: {
 //手机号和验证码都不能为空
 isClick(){
  if(!this.phone || !this.verifyCode) {
  return true
  } else {
  return false
  }
     
 }
},

3.2点击登录发送请求,得到的并存储到localStorage里面,最后跳转到登录页面

handleLogin() {
 //点击发送
 this.errors = {};
 this.$axios.post('/api/posts/sms_back',{
  phone:this.phone,
  code:this.verifyCode
 }).then(res => {
  console.log(res);
  localStorage.setItem('ele_login',true)
  this.$router.push('/')
 }).catch(error =>{
  //返回错误信息
  this.errors ={
  code:error.response.data.msg
 }
 })
}

总结

以上所述是小编给大家介绍的vue实现短信验证码登录功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 #Javascript
使用Bootstrap做一个朝代历史表
Dec 10 #Javascript
JS实现拼图游戏
Jan 29 #Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 #Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 #Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 #Javascript
js刷新页面location.reload()用法详解
Dec 09 #Javascript
You might like
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php学习笔记之基础知识
2014/11/08 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
python实现电子词典
2020/04/23 Python
python动态网页批量爬取
2016/02/14 Python
python实现Windows电脑定时关机
2018/06/20 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
便利店的创业计划书
2014/01/15 职场文书
岗位工作说明书
2014/07/29 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
学生个人评语大全
2015/01/04 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技