当前位置：首页 > article >正文

如何在 uniapp 中实现图形验证码

article 2024/11/8 7:04:03

全篇大概2000 字（含代码），建议阅读时间10分钟。

什么是图形验证码？

图形验证码（也称为图片验证码或验证码图像）通常用于防止机器人自动提交表单，确保用户是人工操作。

一、需求

我们希望在一个表单中实现以下功能：

1.用户输入手机号。

2.用户看到一个图形验证码，并输入验证码内容。

3.用户点击“发送短信”按钮，发送验证码到指定手机号。

二、实现步骤

2.1 项目准备

创建一下一个uniapp项目，项目名称自拟。

2.2 页面结构

首先，我们设计一个简单的页面布局，其中包括手机号输入框、图形验证码图片、验证码输入框以及发送短信按钮。

<template>
  <view class="container">
    <view class="phone-container">
      <view class="label-title">
            手机号<label>*</label>
      </view>
      <input 
           v-model="phone"
           placeholder="请输入手机号"
           type="number"
           maxlength="11" />
    </view>
    <view class="verification-container">
      <img
        :src="captchaImage"
        alt="验证码"
        class="captcha"
        @click="refreshCaptcha"
      />
      <input 
        v-model="verificationCode" 
        placeholder="请输入验证码" 
        maxlength="4" 
        type="number" 
        class="verification-input" />
    </view>
    <button @click="sendSMS" class="sendBtn">发送短信</button>
  </view>
</template>

2.3 处理数据和方法

接下来，我们将处理数据和方法的部分。

在 data 中定义手机号、验证码输入、图形验证码等字段。

在 methods 中，我们需要实现以下几个功能：

generateCaptcha：生成一个随机的图形验证码。

refreshCaptcha：点击图形验证码时刷新验证码。

sendSMS：点击发送短信按钮时触发发送短信的逻辑。

<script>
export default {
  data() {
    return {
      phone: '',             // 用户输入的手机号
      verificationCode: '', // 用户输入的验证码
      captchaImage: '',     // 图形验证码图片地址
    };
  },
  methods: {
    sendSMS() {
      /*
       * 发送短信
       */
      console.log('发送短信到:', this.phone);
    },
    generateCaptcha() {
      /*
       * 生成一个随机的验证码并显示为图片
       */
       // 生成一个4位数的验证码
      const captcha = Math.floor(1000 + Math.random() * 9000);
       // 使用一个免费的图片生成服务
      this.captchaImage = `https://dummyimage.com/100x40/000/fff&text=${captcha}`; 
    },
    refreshCaptcha() {
      /*
       * 刷新验证码
       */
      this.generateCaptcha(); // 重新生成验证码
    },
  },
  mounted() {
    /*
     * 页面加载时生成验证码
     */
    this.generateCaptcha();
  },
};
</script>

2.4 CSS样式

<style>
.container {
  padding: 20px;
}

.phone-container {
  margin-bottom: 20px;
}

.label-title {
  font-size: 16px;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.verification-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.captcha {
  width: 100px;
  height: 40px;
  margin-right: 10px;
  cursor: pointer;
}

.verification-input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.sendBtn {
  background-color: #00ac56;
  color: white;
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.sendBtn:hover {
  background-color: #008c4e;
}
</style>

三、图形验证码实现逻辑

生成验证码：使用一个免费的图片生成服务（https://dummyimage.com/）来生成验证码。我们生成一个随机的4位数，然后通过 dummyimage.com 服务生成带有文本的图片作为验证码。

刷新验证码：当用户点击验证码图片时，调用 refreshCaptcha 方法重新生成一个新的验证码。