一、前言

为了保证系统安全，让用户输入验证码是一种很常见的操作。相信大家经常看到过类似如下的界面，做这个功能有很多种方案，但是在Uni-app小程序上踩了挺多坑，下面将说明小程序验证码操作功能的解决方案。

二、解决方案

每个横线就是一个input输入框，维护一个inputs数组，作为他们的ref，用来获取DOM值，方便完成输入完上一个input框自动聚焦到下一个输入框上，但是，在这里就不行了，会发现获取不到每个input框的DOM。就算使用uni自带的query查询器也获取不到input框上的focus方法。同时，小程序也没有document去获取它们的DOM，所以这一方案行不通。
隐藏一个输入框，用来控制展示。高亮下划线只需判断当前的index是否为输入框值的下标即可。当我删除时，高亮也会自动定位到上一个，这样代码逻辑更加简单，只用一个字符串用来控制它们的数据。

三、代码示例

<!-- 隐藏的输入框 -->
<input class="hidden-input" adjust-position="false" @blur="handleBlur" :focus="focus" v-model="code" type="number" maxlength="6" />
<view class="verification-code-input">
	<!-- 显示code -->
	<view class="code-inputs">
        <view v-for="(item, index) in 6" :key="index" class="code-input" :style="{borderColor:index === code.length ? '#007bff': ''}" @click="handleValueFocus(index)">{{code[index] ?? ''}}</view>
   </view>
	<!-- 错误信息 -->
	<view v-if="errorMessage" class="error-message">{{ errorMessage }}</view>
</view>

// 用户输入的验证码
const code = ref("");
// input焦点，用于键盘隐藏后重新唤起
const focus = ref(true)
// 错误信息
const errorMessage = ref("");

// 监听验证码
watch(code, async (value) => {
    
    if (value.length === 6) {
        // TODO: 如果到达第六位发送登录请求
    }
})



// 每个item点击事件
const handleValueFocus = (index) => {
    if (index === code.value.length) {
        focus.value = true
    }
}

// 输入框失焦事件
const handleBlur = () => {
    focus.value = false
}

三、寄语

这种解决方案还是很好理解的，如果还有其他解决方案，欢迎评论区交流。如需源码、资源等，欢迎观祝工种号---代码分享站领取哦~

公众号二维码.jpg

Uni-app小程序验证码操作解决方案

一、前言

二、解决方案

三、代码示例

三、寄语