Vue.js实现移动端短信验证码功能


Posted in Javascript onMarch 29, 2017

现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框,如图所示

Vue.js实现移动端短信验证码功能

当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值,

input输入框是循环出来的,代码如下:

<div class="sms_input">
  <div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled="true" v-model="sms.msg[n-1]"></div>
  <div><input v-if="sms.show[sms.numbers-1]" v-model="sms.msg[sms.numbers-1]" pattern="[0-9]*" type="number" ref="sms_input" @keyup="sms_input($event)" oninput="if(value.length>1)value=value.slice(0,1)"></div>
  <div v-for="n in sms.numbers-1"><input v-if="sms.show[n+sms.numbers-1]" disabled="true"></div>
 </div>

第一第三行不解释,相信聪明的你可以看懂, 让我们一起看第二行,keyup是当键盘按下的时候执行的函数,ref则为传值,

data () {
  return {
   ……
   sms: {
    numbers: 4,
    msg: [],
    show: [],
    position: 0
   },
  ……
  }
 }
_setSmsInputDisplay () {
   var arr = []
   for (var i = 0; i < this.sms.numbers * 2 - 1; i++) {
    arr.push(i >= this.sms.numbers - 1 - this.sms.position && i < this.sms.numbers - 1 - this.sms.position + this.sms.numbers ? 1 : 0)
   }
   this.sms.show = arr
  },
  _resetSms () {
   this.sms.msg = []
   for (var i = 0; i < this.sms.numbers; i++) {
    this.sms.msg.push(null)
   }
   this.sms.position = 0
   this._setSmsInputDisplay()
   this.$nextTick(function () {
    this.$refs.sms_input.focus()
   })
  }
  submit () {
   this.$api.post('signin', {
    mobile: this.mobile,
    captcha: this.captcha
   }, r => {
    this.$router.push('/main')
    console.log(r)
   })
  },
  sms_input (e) {
   if (e.keyCode === 8) { // 删除
    if (this.sms.position > 0) {
     this.sms.position--
     this.sms.msg.splice(-2, 1)
     this.sms.msg.unshift(null)
     this._setSmsInputDisplay()
    }
   } else if (e.keyCode >= 48 && e.keyCode <= 57) { // 仅可以输入数字
    if (this.sms.position < this.sms.numbers - 1) {
     this.sms.position++
     this.sms.msg.splice(-1, 1, String.fromCharCode(e.keyCode))
     this.sms.msg.shift()
     this.sms.msg.push(null)
     this._setSmsInputDisplay()
    } else {
     document.activeElement.blur() // hide keyboard for iOS
     console.log(this.sms.msg.join(''))
     this.submit()
    }
   } else {
    this.$refs.sms_input.value = '' // remove NaN
   }
  }

如此,便可实现验证码输入功能,代码清晰,聪明的你若有疑问,随时留言,我看到后定会秒回。

以上所述是小编给大家介绍的Vue.js实现移动端短信验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
javascript事件模型介绍
May 31 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
Angular2入门--架构总览
Mar 29 #Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 #Javascript
AngularJS中$http的交互问题
Mar 29 #Javascript
Angular2开发——组件规划篇
Mar 28 #Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 #jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 #jQuery
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 #Javascript
You might like
聊天室php&amp;mysql(一)
2006/10/09 PHP
PHP多进程编程实例
2014/10/15 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
js实现无缝轮播图
2020/03/09 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
python 类详解及简单实例
2017/03/24 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
会务接待方案
2014/02/27 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
同意迁入证明模板
2014/10/26 职场文书
2015年考研复习计划
2015/01/19 职场文书
贷款收入证明范本
2015/06/12 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
PHP正则表达式之RCEService回溯
2022/04/11 PHP