校验码

指南 ​

安全提示

vue-validate-code 完全在浏览器中生成并校验验证码。SVG 渲染器会将字符暴露为 DOM 文本，客户端校验始终可以被绕过。它只能作为视觉交互辅助，不能用于 CAPTCHA、身份验证或防滥用。安全敏感场景必须使用服务端生成并校验的挑战。

安装 ​

shell
npm i vue-validate-code
shell
yarn add vue-validate-code
shell
pnpm add vue-validate-code

使用 ​

作为组件使用 ​

validate-code.vue
vue
<script lang="ts" setup>
import { ref, useTemplateRef } from 'vue'
import { ValidateCode } from 'vue-validate-code'

const validateCode = ref('')
const validateCodeRef = useTemplateRef('validateCodeRef')

function handleTriggerValidate() {
  if (!validateCode.value) {
    return console.log('未输入验证码')
  }
  validateCodeRef.value?.validate(validateCode.value)
}
function handleValidateCallback(isValid: boolean) {
  if (isValid) {
    console.log('校验成功')
  } else {
    console.log('校验失败')
    validateCodeRef.value?.update()
  }
}
</script>

<template>
  <ValidateCode
    @validate="handleValidateCallback"
    ref="validateCodeRef"
    renderer="svg"
  />
  <input
    v-model="validateCode"
    placeholder="请输入验证码"
  />
  <button
    @click="handleTriggerValidate"
    type="button"
  >
    校验
  </button>
</template>

渲染器 ​

ValidateCode 内置两种渲染器：

  • canvas（默认）
  • svg
vue
<ValidateCode renderer="canvas" />

<ValidateCode renderer="svg" />

作为插件使用 ​

main.ts
ts
import { createApp } from 'vue'
import ValidateCode from 'vue-validate-code'
import App from '@/App.vue'

const app = createApp(App)

app.use(ValidateCode)

app.mount('#app')

然后你就可以在你的 Vue 应用内使用 ValidateCode 组件，如上所示。

属性 ​

配置优先级为：显式传入的组件属性 > 插件全局配置 > 内置默认值。省略布尔属性时继承配置值，显式传入 false 时关闭对应选项。

chars ​

  • 类型: string
  • 默认值: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

验证码字符集.

按 Unicode 码点抽取字符，因此 😀 等表情不会被拆开。由多个码点组成的序列（例如通过连接符组合的表情或带组合音标的字母）仍会被分别抽取。

padding ​

  • 类型: number
  • 默认值: 10

画布内间距。

renderer ​

  • 类型: 'canvas' | 'svg'
  • 默认值: 'canvas'

渲染引擎类型。

updateOnChange ​

  • 类型: boolean
  • 默认值: true

Props 变更时自动更新验证码。

updateOnClick ​

  • 类型: boolean
  • 默认值: true

点击时自动更新验证码。

caseSensitive ​

  • 类型: boolean
  • 默认值: true

validate 方法是否大小写敏感。

hasDots ​

  • 类型: boolean
  • 默认值: true

是否渲染圆点。

hasLines ​

  • 类型: boolean
  • 默认值: true

是否渲染线条。

colors ​

  • 类型: string[]
  • 默认值: []

全局颜色。

bgColors ​

  • 类型: string[]
  • 默认值: []

背景颜色。

fontCount ​

  • 类型: number
  • 默认值: 6
  • 范围: 1 到 64

文字数量。

fontFamily ​

  • 类型: string
  • 默认值: SimHei

字体。

fontColors ​

  • 类型: string[]
  • 默认值: []

字体颜色。

minFontSize ​

  • 类型: number
  • 默认值: 20

最小字号。

maxFontSize ​

  • 类型: number
  • 默认值: 30

最大字号。

minFontAngle ​

  • 类型: number
  • 默认值: -30

文字旋转最小角度。

maxFontAngle ​

  • 类型: number
  • 默认值: 30

文字旋转最大角度。

dotCount ​

  • 类型: number
  • 默认值: 6
  • 范围: 0 到 256

圆点数量。

dotColors ​

  • 类型: string[]
  • 默认值: []

圆点颜色。

minDotRadius ​

  • 类型: number
  • 默认值: 1

最小圆点半径。

maxDotRadius ​

  • 类型: number
  • 默认值: 3

最大圆点半径。

lineCount ​

  • 类型: number
  • 默认值: 6
  • 范围: 0 到 256

线条数量。

lineColors ​

  • 类型: string[]
  • 默认值: []

线条颜色。

minLineWidth ​

  • 类型: number
  • 默认值: 1

最小线条宽度。

maxLineWidth ​

  • 类型: number
  • 默认值: 2

最大线条宽度。

事件 ​

validate ​

  • type: (isValid: boolean) => void

当 validate 被调用后触发，参数为校验结果。

success ​

  • 类型: () => void

当 validate 方法返回 true 时触发。

fail ​

  • 类型: () => void

当 validate 方法返回 false 时触发。

ready ​

  • 类型: () => void

当组件 ValidateCode 渲染完成时触发。

方法 ​

validate ​

  • 类型: (input: string) => boolean

传入用户输入的验证码，校验并返回是否通过。

update ​

  • 类型: () => void

更新验证码，并重新渲染。

render ​

  • 类型: () => void

重新渲染当前的验证码。

destroy ​

  • 类型: () => void

销毁当前渲染的验证码。

resize ​

ts
interface CanvasSize {
  width: number
  height: number
}
  • 类型: (size: CanvasSize) => void

调整画布尺寸并重新渲染验证码。调整尺寸会生成新的验证码。