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 相关文章推荐
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
vue实现树形菜单效果
Mar 19 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
javscript 数组扁平化的实现
Feb 03 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
《孔繁森》教学反思
2014/04/17 职场文书
体育口号大全
2014/06/18 职场文书
另类冲刺标语
2014/06/24 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
python实现的web监控系统
2021/04/27 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
详解redis在微服务领域的贡献
2021/10/16 Redis
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python