react实现文字验证，图片验证功能

插件react-captcha-code

import React, { Component } from 'react'
import Captcha from 'react-captcha-code'
const numberCode = (n, m) => {  //动态生成验证码
    var str = ''
    for (var i = 0; i < 4; i++) {
        str += Math.round(Math.random() * (n - m) + m)
    }
    return str
}
export default class Captchas extends Component {
    constructor(props) {
        super(props)
        this.state = {
            code: numberCode(0, 9)
        }
        this.codeInput = React.createRef()
    }
    handleClick = () => { 
        this.setState({
            code: numberCode(0, 9)
        })
    }
    changeInput = () => {
        if (this.codeInput.current.value == this.state.code) {//验证码与输入值进行比较
            console.log("success")
        }
        else
            console.log('failed')
    }
    codecfn=()=>{
     if (this.codec.value == this.state.code) {//验证码与输入值进行比较
            console.log("success")
        }
        else
            console.log('failed')
    }
    render() {
        return (
            <div>
                <Captcha onClick={this.handleClick} code={this.state.code} />
                <br />
                <input type="text" ref={this.codeInput} />
                <button onClick={this.changeInput}> dd</button>
                <br />
                <input type="text" ref={c=>this.codec=c} />
                <button onClick={this.codecfn}> dd</button>
            </div>
        )
    }
}

效果图如下：

插件 react-simple-verify

import React, { Component } from 'react'
import ReactSimpleVerify from 'react-simple-verify'
import 'react-simple-verify/dist/react-simple-verify.css'
export default class CaptchaCode extends Component {
    success(){
        alert('成功之后可以再这里进行其他操作')
    }
    reset=()=>{ //重置
        const $verify = this.refs.verify 
        $verify.reset()
        this.setState({
          isPass: false
        })
    }
    render() {
        return (
            <div>
                <ReactSimpleVerify ref="verify" success={ this.success.bind(this) } />
                <button onClick={this.reset}>reset</button>
            </div>
        )
    }
}

效果图如下：

图片验证

链接：https://blog.csdn.net/weixin_33946605/article/details/88624320

参考

可以在官网npmjs.com上搜索上面的插件查看详细的内容