更新记录

V1.0.0（2025-11-13） 下载此版本

字母数字验证码 -- 首次发布

平台兼容性

uni-app(4.56)

其他

GJS Number Captcha 参考文档

• ✅ 随机生成数字和字母验证码
• ✅ 支持大小写敏感/不敏感验证
• ✅ 可自定义验证码长度
• ✅ 支持自定义样式和尺寸
• ✅ 点击刷新验证码
• ✅ 事件驱动的验证机制

组件特性

核心功能

• 随机验证码生成：自动生成包含数字和字母的验证码
• 智能验证：支持大小写敏感/不敏感验证
• 点击刷新：用户可点击验证码图片刷新
• 事件驱动：通过事件机制处理验证结果

自定义能力

• 尺寸自定义：可设置宽度和高度
• 样式自定义：支持背景色、字体样式等
• 长度自定义：可配置验证码位数（1-10位）
• 敏感度控制：可设置是否区分大小写

组件概述

gjs-number-captcha 是一个功能完整的验证码组件，提供验证码生成、显示和验证功能。

Props 属性

width

• 类型: String
• 默认值: '200rpx'
• 说明: 设置验证码组件的宽度
• 示例:

  <gjs-number-captcha width="300rpx" />

height

• 类型: String
• 默认值: '60rpx'
• 说明: 设置验证码组件的高度
• 示例:

  <gjs-number-captcha height="80rpx" />

isCaseSensitive

• 类型: Boolean
• 默认值: false
• 说明: 是否区分大小写验证
  • true: 区分大小写
  • false: 不区分大小写
• 示例:

  <gjs-number-captcha :is-case-sensitive="true" />

codeLength

• 类型: Number
• 默认值: 4
• 说明: 验证码的长度（1-10位）
• 示例:

  <gjs-number-captcha :code-length="6" />

bgColor

• 类型: String
• 默认值: '#fff'
• 说明: 验证码背景颜色
• 示例:

  <gjs-number-captcha bg-color="#f8f9fa" />

Events 事件

getCode

• 触发时机: 验证码生成或刷新时
• 参数: (code: string) - 生成的验证码字符串
• 说明: 获取当前显示的验证码，可用于后端验证

• 示例:

  <gjs-number-captcha @get-code="handleGetCode" />
  
  <script>
  export default {
  methods: {
    handleGetCode(code) {
      console.log('当前验证码:', code)
      // 可以发送到后端存储
      this.sendToBackend(code)
    }
  }
  }
  </script>

success

• 触发时机: 验证码验证成功时
• 参数: 无
• 说明: 用户输入的验证码正确时触发

• 示例:

  <gjs-number-captcha @success="handleSuccess" />
  
  <script>
  export default {
  methods: {
    handleSuccess() {
      uni.showToast({ title: '验证成功', icon: 'success' })
      // 继续后续操作
      this.nextStep()
    }
  }
  }
  </script>

fail

• 触发时机: 验证码验证失败时
• 参数: 无
• 说明: 用户输入的验证码错误时触发

• 示例:

  <gjs-number-captcha @fail="handleFail" />
  
  <script>
  export default {
  methods: {
    handleFail() {
      uni.showToast({ title: '验证码错误', icon: 'error' })
      // 清空输入框
      this.userInput = ''
    }
  }
  }
  </script>

Methods 方法

refreshCode()

• 说明: 刷新验证码，生成新的验证码
• 参数: 无
• 返回值: 无

• 示例:

  <template>
  <view>
    <gjs-number-captcha ref="captchaRef" />
    <button @click="refreshCaptcha">刷新验证码</button>
  </view>
  </template>
  
  <script>
  export default {
  methods: {
    refreshCaptcha() {
      this.$refs.captchaRef.refreshCode()
    }
  }
  }
  </script>

verifyCode(code)

• 说明: 验证用户输入的验证码
• 参数:
  • code (string): 用户输入的验证码
• 返回值: 无（通过事件返回结果）

• 示例:

  <template>
  <view>
    <input v-model="inputCode" />
    <gjs-number-captcha ref="captchaRef" @success="onSuccess" @fail="onFail" />
    <button @click="verify">验证</button>
  </view>
  </template>
  
  <script>
  export default {
  data() {
    return {
      inputCode: ''
    }
  },
  methods: {
    verify() {
      this.$refs.captchaRef.verifyCode(this.inputCode)
    },
    onSuccess() {
      console.log('验证成功')
    },
    onFail() {
      console.log('验证失败')
    }
  }
  }
  </script>

组件内部数据

codeList

• 类型: Array<Object>
• 说明: 存储验证码字符信息的数组
• 结构:

  [
  {
    code: 'A',           // 字符
    color: 'rgb(100, 150, 200)',     // 颜色
    fontSize: '18px',    // 字体大小
    padding: '5px',      // 内边距
    transform: 'rotate(15deg)' // 旋转角度
  }
  ]

使用示例

完整示例

<template>
  <view class="captcha-demo">
    <view class="input-group">
      <text class="label">验证码</text>
      <input 
        v-model="captchaInput" 
        placeholder="请输入验证码"
        maxlength="4"
        class="input"
      />
    </view>

    <view class="captcha-container">
      <gjs-number-captcha 
        ref="captchaRef"
        width="240rpx"
        height="80rpx"
        bg-color="#f8f9fa"
        :code-length="4"
        :is-case-sensitive="false"
        @get-code="handleGetCode"
        @success="handleSuccess"
        @fail="handleFail"
      />
      <text class="refresh-hint">点击图片刷新</text>
    </view>

    <button 
      class="verify-btn" 
      :disabled="!captchaInput"
      @click="handleVerify"
    >
      验证
    </button>
  </view>
</template>

<script>
import gjsNumberCaptcha from '@/components/gjs-number-captcha/index.vue'

export default {
  components: { gjsNumberCaptcha },
  data() {
    return {
      captchaInput: '',
      currentCaptcha: ''
    }
  },
  methods: {
    handleGetCode(code) {
      this.currentCaptcha = code
      console.log('验证码已生成:', code)
    },
    handleVerify() {
      if (!this.captchaInput) {
        uni.showToast({ title: '请输入验证码', icon: 'none' })
        return
      }

      uni.showLoading({ title: '验证中...' })

      // 模拟网络延迟
      setTimeout(() => {
        uni.hideLoading()
        this.$refs.captchaRef.verifyCode(this.captchaInput)
      }, 500)
    },
    handleSuccess() {
      uni.showToast({ 
        title: '验证成功', 
        icon: 'success',
        duration: 2000
      })
      this.captchaInput = ''

      // 验证成功后自动刷新
      setTimeout(() => {
        this.$refs.captchaRef.refreshCode()
      }, 1000)
    },
    handleFail() {
      uni.showToast({ 
        title: '验证码错误', 
        icon: 'error',
        duration: 2000
      })
      this.captchaInput = ''

      // 验证失败后自动刷新
      this.$refs.captchaRef.refreshCode()
    }
  }
}
</script>

<style scoped>
.captcha-demo {
  padding: 40rpx;
}

.input-group {
  margin-bottom: 40rpx;
}

.label {
  display: block;
  font-size: 32rpx;
  margin-bottom: 20rpx;
  color: #333;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.captcha-container {
  text-align: center;
  margin-bottom: 40rpx;
}

.refresh-hint {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-top: 16rpx;
}

.verify-btn {
  width: 100%;
  height: 80rpx;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
}

.verify-btn:disabled {
  background: #ccc;
}
</style>

注意事项

1. ref 引用: 必须使用 ref 属性来获取组件实例，才能调用方法
2. 事件监听: 确保正确监听事件来处理验证结果
3. 大小写敏感: 根据实际需求设置 isCaseSensitive 属性
4. 验证码长度: 建议使用4-6位验证码，平衡安全性和用户体验
5. 样式兼容: 确保自定义样式在不同平台上的兼容性

浏览器兼容性

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+
• ✅ 微信小程序
• ✅ H5 移动端