vue输入验证码自动验证,vue验证码怎么做
本文主要介绍一个vue实现验证码输入交互的例子，帮助大家更好的理解和使用Vue。感兴趣的朋友可以了解一下。
最近我做了一个有输入验证码交互的H5页面，就是移动端常见的验证码输入交互类型。就是那种，对，就是那种在移动端很常见的验证码交互，一个数字一个下划线。在实现的过程中，主要是指美团外卖Android端的具体交互。
应用于项目的效果如下。
一般操作：
粘贴效果：
方案选择
方案1：调整文字的间距
通过设置input的字母间距属性，我们可以让验证码之间的间距足够大，然后把底线改成若干个有间距的线段。
但是，这里会有一个问题。也就是光标会一直在数字的左侧，我们想要的是输入的数字中心位于原来的光标位置。我最终放弃了这个计划。
显然，这个方案并不合适。
方案2：使用多个 input
这是我使用的方式，也是我接下来要详细讲解的方案。主要原理是：使用多个输入元素，每个输入只能输入一个数字。当通过输入事件检测到字符输入时，焦点自动聚焦在下一个输入元素上。
当然，我们还需要点击任意一个输入框，将焦点移动到第一个空值的输入。另外，当你点击退格键时，你也应该改变焦点。
测试后发现，焦点的移动不会导致手机键盘折叠。我最终决定采用这个方案。
代码实现
在线示例：https://codepen.io/F-star/pen/dyyeZaN
HTML:
div id=应用程序
div class=验证码
输入v-for=(c，index) in ct :key=index
type= number v-model= CT[index] ref= input
:style= { borderBottomColor:index=cIndex？#333 : }
@ input= e={ onInput(e . target . value，index)}
@ keydown . delete= e={ onKeydown(e . target . value，index)}
@focus=onFocus
:disabled=“正在加载”
/div
p{{msg}}/p
/div
CSS:验证码{
显示器：flex
justify-content:居中；
边距-顶部：40px
}
输入{
右边距：20px
宽度：45px
文本对齐：居中；
边框：无；
border-bottom:1px solid # eee；
字体大小：24px
大纲：无；
}
输入：最后一个类型{
右边距：0；
}
输入：禁用{
颜色：# 000；
背景色：# fff
}。消息{
文本对齐：居中；
}
JS:
var Main={
data() {
返回{
联系类型：[，，，， ， ]，
加载：假，
消息： ，
}
},
计算值：{
ctSize() {
返回this . CT . length；
},
cIndex() {
设I=this . CT . find index(item=item=== )；
I=(I this . CT size)% this . CT size；
返回I；
},
lastCode() {
返回this . CT[this . CT size-1]；
}
},
观察：{
cIndex() {
this . reset caret()；
},
lastCode(val) {
if (val) {
console.log(this.ctSize ，this.ctSize)
这个。$refs.input[this.ctSize - 1]。blur()；
this . send captcha()；
}
}
},
已安装(){
this . reset caret()；
},
方法：{
onInput(val，index) {
this.msg=
val=val.replace(/\s/g， )；
if (index==this.ctSize - 1) {
this . CT[this . CT size-1]=val[0]；//最后一个代码，只允许一个字符。
} else if(val.length 1) {
设i=index
for (i=索引；I this . CT size I-index val . length；i ) {
this . CT[I]=val[I]；
}
this . reset caret()；
}
},
//重置光标位置。
resetCaret() {
这个。$refs.input[this.ctSize-1]。焦点()；
},
onFocus() {
//监听焦点事件，将光标重新定位到“第一个空格的位置”。
let index=this . CT . find index(item=item=== )；
index=(index this . CT size)% this . CT size；
console.log(这个。$refs.input)
这个。$refs.input[index]。焦点()；
},
onKeydown(val，index) {
if (val===) {
//删除之前输入的值，关注它。
如果(索引0) {
this . CT[index-1]=“”；
这个。$refs.input[index - 1]。焦点()；
}
}
},
sendCaptcha() {
console . log()；
This.msg=`向服务器发送验证码：$ { this . CT . join()} `；
//此时无法操作输入。
this.loading=true
setTimeout(()={
This.msg=(验证码错误)
this.loading=false
这个。$nextTick(()={
this . reset()；
})
}, 3000)
},
重置(){
//重置。通常在验证码错误时触发。
this . CT=this . CT . map(item= )；
this . reset caret()；
}
}
}
var Ctor=Vue.extend(主)
新的Ctor()。$ mount(“# app”)
原理
创建多个输入元素，并将焦点事件绑定到这些输入。一旦这个事件被触发，我们将把焦点从左到右移动到第一个值为null的输入。所以在初始状态下，点击最右边的输入，光标还是会跑到最左边的输入。
然后，我们将输入事件绑定到这些输入，并监听输入字符。当输入字符不是空字符时，我们将重新定位下一个需要聚焦的输入，就像聚焦事件一样。如果输入了多个字符(通常是因为粘贴的原因)，多余的字符会在后面的输入中逐一填充，然后光标会重新定位。这样就实现了逐个输入号码和粘贴短信验证码(一次输入多个号码)的交互。
最后，我们必须处理退格行为，我们需要将keydown事件绑定到所有输入。当按下退格键，并且当前输入的值为空时，清除上一次输入的数据并聚焦于上一次输入。
可以，验证码输入错误后，需要清除输入的所有数据，将焦点移到第一次输入。
总结
原理是没有了，但是实现起来有点繁琐。
我的方案与浏览器不兼容，请在全面测试后使用。
如果可能的话，我还是推荐简单的输入框方案，而不是这种花哨的交互。实现简单，维护简单，不会有太多意外情况。因为如果这里输入的验证码在某些浏览器上不能正确操作，还是对转化率有很大影响的。
以上是vue如何实现验证码输入交互的细节。更多关于Vue验证码输入的交互信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。