- 默认自动计算
- 支持异步方法验证
- 扶持 JavaScript、TypeScript语法
// Javascript
<canvas id="canvas"></canvas>
// React
<canvas ref={canvas}></canvas>
// Vue
<canvas ref="canvas"></canvas>
- graphic() 图文验证
- equation() 算式验证
- sliders() 滑动验证
- updateCode() 从服务获取验证码
import wpvCode from 'wpv-code'
const target = '"canvas" | <canvas /> '
const code = wpvCode(target)
图文验证码
code.graphic()
算术验证码
code.equation()
滑动验证
// 打开服务验证方式
code.openServerVerify = async () => {
return Promise((reslove, reject) => {
reslove({
value: true | false
})
})
}
code.sliders(() => {
// 验证成功回调
})
将默认计算,更改为 server 计算
code.updateCode = async () => {
return Promise((reslove, reject) => {
reslove({
label?: '8R8R | 1 + 1',
value: '8R8R | 2'
})
})
}
Product
code.product
Parameter | Instructions | Type | Default | Version |
---|---|---|---|---|
width | Canvas Width | number / 'auto' |
120 | >= 0.1.6 |
height | Canvas Height | number |
38 | >= 0.0.1 |
ratio | Canvas 精度 | number |
4 | >= 0.0.1 |
length | 验证码长度 | 4 | 6 |
4 | >= 0.0.1 |
space | 验证码间隔 | number |
2 | >= 0.0.1 |
slidersTheme | 滑动主题配置 | Object | > 0.1.6 |
Parameter | Instructions | Type | Default | Version |
---|---|---|---|---|
bg | 背景色 | string | #5F944C | >= 0.1.6 |
borderColor | 边框颜色 | string | #92CB62 | >= 0.1.6 |
pointColor | 滑动点颜色 | string | #F7C652 | >= 0.1.6 |
iconColor | icon颜色 | string | #5F944C | >= 0.1.6 |
text | 文字描述 | Array<string> | ['请按住滑块,拖到最右边', '验证中...', '完成验证', '验证失败'], | >= 0.1.6 |
import wpvCode from 'wpv-code'
默认字符长度为四位
const code = wpvCode('canvas')
code.graphic()
// Calculation results
console.log(code.product) // [a-zA-Z0-9]
六位字符
const code = wpvCode('canvas')
code.config.length = 6
code.graphic()
// 字符结果产出
console.log(code.product) // [a-zA-Z0-9]
import wpvCode from 'wpv-code'
// Default Single digit calculation
const code = wpvCode('canvas')
code.equation()
// Calculation results
console.log(code.product)
const code = wpvCode('canva')
const asyncdata = () => {
return new Promise((reslove, reject) => {
reslove({
label: '1 + 1',
value: '2'
})
})
}
const data = () => {
return {
label: '1 + 1',
value: '2'
}
}
// async function
code.updateCode = asyncdata
// function
code.updateCode = data
// draw
code.equation()
export type MainParamType = string | HTMLCanvasElement
export type UpdateCodeType = Promise<any> | Function | null
export type openServerVerifyType = Promise<any> | Function | null
export interface InterfaceWpvCode {
target: MainParamType
product: string
config: InterfaceConfig
graphic: Function
equation: Function
sliders: Function
updateCode: UpdateCodeType
openServerVerify: openServerVerifyType
}
export interface InterfaceConfig {
ratio: number
width: number | string
height: number
space: number
length: number
slidersTheme: InterfaceSlidersDefalutTheme
}
export interface InterfaceAsyncCode {
label?: string
value: string | boolean
}
export interface InterfaceSlidersDefalutTheme {
bg: string
borderColor: string
pointColor: string
iconColor: string
text: Array<string>
}
import wpvCode, { ... } from 'wpvcode'
export const slidersDefalutTheme: InterfaceSlidersDefalutTheme = {
bg: '#5F944C',
borderColor: '#92CB62',
pointColor: '#F7C652',
iconColor: '#fff',
text: ['请按住滑块,拖到最右边', '验证中...', '完成验证', '验证失败'],
}
export const defaultConfig: InterfaceConfig = {
ratio: 4,
width: 120,
height: 38,
space: 2,
length: 4,
slidersTheme: slidersDefalutTheme
}
export const sliderDefaultConfig: InterfaceConfig = {
...defaultConfig,
width: 342,
height: 60
}
export const defaultWpvCodeObject: InterfaceWpvCode = {
target: '',
product: '',
config: defaultConfig,
graphic: () => {},
equation: () => {},
sliders: () => {},
openServerVerify: null,
updateCode: null
}
import wpvCode, { ... } from 'wpv-code'
<input id="input" />
<canvas id="canvas"></canvas>
const code = wpvCode('canvas')
const inputValue = document.getElementById('input').value
// Draw
code.graphic()
// Calculation results
code.product
if (inputValue === code.product) {
// Success
} else {
// failure
code.graphic()
}