Validate Code

Guide ​

Security notice

vue-validate-code generates and validates codes entirely in the browser. The SVG renderer exposes its characters as DOM text, and client-side checks can always be bypassed. Use it only as a visual interaction aid—not as CAPTCHA, authentication, or abuse prevention. Security-sensitive flows require a server-generated challenge with server-side validation.

Installation ​

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

Usage ​

As component ​

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('No validate code value')
  }
  validateCodeRef.value?.validate(validateCode.value)
}
function handleValidateCallback(isValid: boolean) {
  if (isValid) {
    console.log('validate success')
  } else {
    console.log('validate fail')
    validateCodeRef.value?.update()
  }
}
</script>

<template>
  <ValidateCode
    @validate="handleValidateCallback"
    ref="validateCodeRef"
    renderer="svg"
  />
  <input
    v-model="validateCode"
    placeholder="Fill the validate code"
  />
  <button
    @click="handleTriggerValidate"
    type="button"
  >
    Validate
  </button>
</template>

Renderer ​

ValidateCode supports two built-in renderers:

  • canvas (default)
  • svg
vue
<ValidateCode renderer="canvas" />

<ValidateCode renderer="svg" />

As plugin ​

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')

Then you can component ValidateCode in your app everywhere like above.

Props ​

Explicit component props take precedence over plugin configuration, followed by built-in defaults. Omitting a Boolean prop inherits its configured value; passing false explicitly disables it.

chars ​

  • type: string
  • default: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Chars to generate validate code.

Characters are sampled by Unicode code point, so emoji such as 😀 are kept intact. Sequences containing multiple code points, such as joined emoji or letters with combining marks, are sampled separately.

padding ​

  • type: number
  • default: 10

Canvas padding.

renderer ​

  • type: 'canvas' | 'svg'
  • default: 'canvas'

Render engine type.

updateOnChange ​

  • type: boolean
  • default: true

Whether update validate code when props changed.

updateOnClick ​

  • 类型: boolean
  • 默认值: true

Whether update validate code when clicked.

caseSensitive ​

  • type: boolean
  • default: true

validate method is case sensitive.

hasDots ​

  • type: boolean
  • default: true

Whether to render dots.

hasLines ​

  • type: boolean
  • default: true

Whether to render lines.

colors ​

  • type: string[]
  • default: []

Global colors.

bgColors ​

  • type: string[]
  • default: []

Canvas background colors.

fontCount ​

  • type: number
  • default: 6
  • range: 1 to 64

Font count.

fontFamily ​

  • type: string
  • default: SimHei

Font family.

fontColors ​

  • type: string[]
  • default: []

Font colors.

minFontSize ​

  • type: number
  • default: 20

Min font size.

maxFontSize ​

  • type: number
  • default: 30

Max font size.

minFontAngle ​

  • type: number
  • default: -30

Min font rotate angle.

maxFontAngle ​

  • type: number
  • default: 30

Max font rotate angle.

dotCount ​

  • type: number
  • default: 6
  • range: 0 to 256

Dot count.

dotColors ​

  • type: string[]
  • default: []

Dot colors.

minDotRadius ​

  • type: number
  • default: 1

Min dot radius.

maxDotRadius ​

  • type: number
  • default: 3

Max dot radius.

lineCount ​

  • type: number
  • default: 6
  • range: 0 to 256

Line count.

lineColors ​

  • type: string[]
  • default: []

Line colors.

minLineWidth ​

  • type: number
  • default: 1

Min line width.

maxLineWidth ​

  • type: number
  • default: 2

Max line width.

Events ​

validate ​

  • type: (isValid: boolean) => void

Triggered after validate method is called, callback the validate result.

success ​

  • type: () => void

Triggered when validate method returns true.

fail ​

  • type: () => void

Triggered when validate method returns false.

ready ​

  • type: () => void

Triggered when ValidateCode component rendered.

Methods ​

validate ​

  • type: (input: string) => boolean

Validate input code, return true if it is valid, false otherwise.

update ​

  • type: () => void

Update the validateCode and render.

render ​

  • type: () => void

Re-render the canvas.

destroy ​

  • type: () => void

Destroy current canvas.

resize ​

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

Resize and re-render the validation code. Resizing generates a new code.