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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
Vue进度条progressbar组件功能
Apr 17 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
vue+iview实现分页及查询功能
Nov 17 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中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
教你php如何实现验证码
2016/01/20 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
pandas中去除指定字符的实例
2018/05/18 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
实习自荐信
2013/10/13 职场文书
销售主管竞聘书
2014/03/31 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技