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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 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
PHP4.04简明安装
2006/10/09 PHP
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
Node.js实现文件上传
2016/07/05 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
python中字符串类型json操作的注意事项
2017/05/02 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python递归实现快速排序
2018/08/18 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
python编写猜数字小游戏
2019/10/06 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
.net工程师笔试题
2012/06/09 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
班组长的岗位职责
2013/12/09 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
情人节活动总结范文
2015/02/05 职场文书
个人求职自荐信范文
2015/03/06 职场文书
安全生产感想
2015/08/07 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
Python各协议下socket黏包问题原理
2022/04/12 Python