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 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
前端Electron新手入门教程详解
Jun 21 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
JS实现小米轮播图
Sep 21 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
Search Engine Friendly的URL设计
2006/10/09 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
php随机输出名人名言的代码
2012/10/07 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
python中List的sort方法指南
2014/09/01 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
django项目中新增app的2种实现方法
2020/04/01 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
C#和SQL Server的面试题
2016/08/12 面试题
县委务虚会发言材料
2014/10/20 职场文书
mysql 索引合并的使用
2021/08/30 MySQL