当前位置：首页 > uni-app

uniapp验证码

2026-03-04 19:05:48uni-app

实现短信验证码功能

在UniApp中实现短信验证码功能通常需要结合后端服务和前端界面设计。以下是常见的实现方式：

获取验证码接口调用

通过uni.request调用后端API获取验证码：

getVerificationCode() {
  uni.request({
    url: 'https://your-api-domain.com/send-sms',
    method: 'POST',
    data: {
      phone: this.phoneNumber
    },
    success: (res) => {
      if(res.data.code === 200) {
        uni.showToast({ title: '验证码已发送' });
        this.startCountdown();
      } else {
        uni.showToast({ title: res.data.message, icon: 'none' });
      }
    }
  });
}

倒计时功能实现

添加60秒倒计时功能提升用户体验：

uniapp验证码

data() {
  return {
    countdown: 0,
    countdownText: '获取验证码'
  }
},
methods: {
  startCountdown() {
    this.countdown = 60;
    const timer = setInterval(() => {
      this.countdown--;
      this.countdownText = `${this.countdown}s后重新获取`;
      if(this.countdown <= 0) {
        clearInterval(timer);
        this.countdownText = '获取验证码';
      }
    }, 1000);
  }
}

前端验证码输入框

使用uni-app组件构建验证码输入界面：

<view class="input-group">
  <input type="number" v-model="phoneNumber" placeholder="请输入手机号" />
</view>
<view class="input-group code-input">
  <input type="number" v-model="verificationCode" placeholder="请输入验证码" />
  <button @click="getVerificationCode" :disabled="countdown > 0">
    {{countdownText}}
  </button>
</view>

验证码校验逻辑

提交时验证验证码有效性：

uniapp验证码

submitForm() {
  if(!this.verificationCode) {
    uni.showToast({ title: '请输入验证码', icon: 'none' });
    return;
  }

  uni.request({
    url: 'https://your-api-domain.com/verify-code',
    method: 'POST',
    data: {
      phone: this.phoneNumber,
      code: this.verificationCode
    },
    success: (res) => {
      if(res.data.success) {
        uni.showToast({ title: '验证成功' });
        // 后续业务逻辑
      } else {
        uni.showToast({ title: '验证码错误', icon: 'none' });
      }
    }
  });
}