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

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

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

投入输入框是循环出来的，代码如下：

在短信中div class=' SMS _ input ' div v-for=' n。数字-1 '输入v-if='短信。显示[n-1]'禁用='真' v模式='短信。msg[n-1]'/div divinput v-if=' SMS。显示[短信。数字-1’‘v-mode=’短信。msg[短信。numbers-1 ']pattern='[0-9]* ' type=' number ' ref=' SMS _ input ' @ key up=' SMS _ input($ event ' ' on input='第一第三行不解释，相信聪明的你可以看懂，让我们一起看第二行，键盘是当键盘按下的时候执行的函数，参考则为传值，

data(){ return {……SMS : { number s : 4，msg: []，show: []，position: 0 }，……} _ setSmsInputDisplay(){ var arr=[]for(var I=0；我喜欢这个。短信。数字* 2-1；我){ arr。推(我=这个。短信。数字-1-这个。短信。这个位置。短信。数字-1-这个。短信。定位这个。短信。数字？1 : 0) } this.sms.show=arr }，_ resetSms(){ this。短信。msg=[]for(var I=0；我喜欢这个。短信。数字；我){这个。短信。味精。push(null)} this。短信。这个位置=0 ._setSmsInputDisplay()这个$nextTick(函数(){这个.参考文献。短信_输入。focus()})} submit(){ this .$api.post('signin '，{ mobile: this.mobile，captcha: this.captcha }，r={ this .$路由器。按下('/main ')控制台。log(r)})}，SMS _ input(e){ if(e .键码===8){//删除如果(这个。短信。位置0){这。短信。这个位置。短信。味精。拼接(-2，1)这个。短信。味精。解除(空)这个._ setSmsInputDisplay()} } else if(e .键码=48 e .键码=57){//仅可以输入数字如果(这个。短信。定位这个。短信。numbers-1){这个。短信。定位这个。短信。味精。拼接(-1，1，String)。FromCharCode(例如KeyCode))这个。短信。味精。shift()这个。短信。味精。推(空)这个._ setSmsInputDisplay()} else { document。activeelement。模糊()//隐藏IOs控制台。日志(这个。短信。味精。联接('))这个。submit()} } else { this .$refs.sms_input.value='' //移除NaN }如此，便可实现验证码输入功能，代码清晰，聪明的你若有疑问，随时留言，我看到后定会秒回。

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