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 相关文章推荐
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
jQuery操作之效果详解
May 19 jQuery
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
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
easyui的tabs update正确用法分享
2014/03/21 PHP
discuz目录文件资料汇总
2014/12/30 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
js加解密 脚本解密
2008/02/22 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
Unix如何添加新的用户
2014/08/20 面试题
护理专业自荐信范文
2014/02/26 职场文书
超市客服工作职责
2014/06/11 职场文书
2014年护理部工作总结
2014/11/14 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS