React tsx如何生成随机验证码

2023-06-14 19:06:13 212人浏览安东尼

摘要

这篇文章主要介绍React tsx如何生成随机验证码，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！React tsx 生成随机验证码，具体内容如下最近开发React 使用tsx编写，没有找到什么好的随机生成验证码的插

这篇文章主要介绍React tsx如何生成随机验证码，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

React tsx 生成随机验证码，具体内容如下

最近开发React 使用tsx编写，没有找到什么好的随机生成验证码的插件，自己就手撸了一个，废话不多话，直接上代码。

tsx文件如下：

React代码片.

import * as React from "react";const size = 4;const verifycode = {    width: "32%",    height: "32px",    marginLeft: "5%",    display:"inline-block",    position:"absolute" as "absolute",    top:"0",    right:"0",}export default class InputVerify extends React.Component<any, any> {    constructor(props) {        super(props);        this.state = {            options: {                id: "verifycode", //容器Id                canvasId: "verifyCanvas", //canvas的ID                width: "150", //默认canvas宽度                height: "47", //默认canvas高度                type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母                code: "",                numArr: "0,1,2,3,4,5,6,7,8,9".split(","),                letterArr: this.getAllLetter(),            }        }    }    componentDidMount() {        const self = this;        setTimeout(() => {            self._init();            self.refresh();        }, 100)        this.props.onRef(this);// 调用父组件传入的函数，把自身赋给父组件    }    _init() {        let con = document.getElementById(this.state.options.id);        let canvas = document.createElement("canvas");        this.state.options.width = con.offsetWidth > 0 ? con.offsetWidth : "150";        this.state.options.height = con.offsetHeight > 0 ? con.offsetHeight : "47";        canvas.id = this.state.options.canvasId;        canvas.width = this.state.options.width;        canvas.height = this.state.options.height;        canvas.style.cursor = "pointer";        canvas.innerhtml = "您的浏览器版本不支持canvas";        con.appendChild(canvas);        let parent = this;        canvas.onclick = function () {            parent.refresh();        }    }    refresh() {        this.state.options.code = "";        let canvas : any = document.getElementById(this.state.options.canvasId);        let ctx = null;        if (canvas.getContext) {            ctx = canvas.getContext('2d');        } else {            return;        }        ctx.clearRect(0, 0, this.state.options.width, this.state.options.height);        ctx.textBaseline = "middle";        ctx.fillStyle = this.randomColor(180, 240);        ctx.fillStyle = "rgba(0,0,0,0)";//背景色        ctx.fillRect(0, 0, this.state.options.width, this.state.options.height);        if (this.state.options.type == "blend") { //判断验证码类型            var txtArr = this.state.options.numArr.concat(this.state.options.letterArr);        } else if (this.state.options.type == "number") {            var txtArr = this.state.options.numArr;        } else {            var txtArr = this.state.options.letterArr;        }        for (var i = 1; i <= size; i++) {            var txt = txtArr[this.randomNum(0, txtArr.length)];            this.state.options.code += txt;            ctx.font = this.randomNum(this.state.options.height / 2, this.state.options.height) + 'px SimHei'; //随机生成字体大小            ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色                   // ctx.fillStyle = "rgb(46, 137, 255)";//固定字体颜色            ctx.shadowOffsetX = this.randomNum(-3, 3);            ctx.shadowOffsetY = this.randomNum(-3, 3);            ctx.shadowBlur = this.randomNum(-3, 3);            ctx.shadowColor = "rgba(0, 0, 0, 0.3)";            var x = this.state.options.width / (size + 1) * i;            var y = this.state.options.height / 2;            var deg = this.randomNum(-30, 30);                        ctx.translate(x, y);            ctx.rotate(deg * Math.PI / 180);            ctx.fillText(txt, 0, 0);                        ctx.rotate(-deg * Math.PI / 180);            ctx.translate(-x, -y);        }                for (var i = 0; i < 4; i++) {            ctx.strokeStyle = this.randomColor(40, 180);            ctx.beginPath();            ctx.moveTo(this.randomNum(0, this.state.options.width), this.randomNum(0, this.state.options.height));            ctx.lineTo(this.randomNum(0, this.state.options.width), this.randomNum(0, this.state.options.height));            ctx.stroke();        }    }    validate(code) {        var code = code.toLowerCase();        var v_code = this.state.options.code.toLowerCase();        if (code == v_code) {            return true;        } else {            this.refresh();            return false;        }    }        getAllLetter() {        var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";        return letterStr.split(",");    }        randomNum(min, max) {        return Math.floor(Math.random() * (max - min) + min);    }        randomColor(min, max) {        var r = this.randomNum(min, max);        var g = this.randomNum(min, max);        var b = this.randomNum(min, max);        return "rgb(" + r + "," + g + "," + b + ")";    }    render() {        return (            <div id="verifycode" style={verifycode}></div>        )    }}

这里verifycode的样式自己修改，一般代码片.

import InputVerify from "../InputVerify"

这样已经能自动生成验证码了，如何进行验证了，我这里也简单贴出来，这里FORM用的antd，一看就懂

代码片.

export default ($Child: any = {}) => { //Form提交的方法 const onFinish = (values: any) => {        if (values.vcode) {            console.log($Child.validate(values.vcode))//调用子组件的方法验证        }    };     const onFinishFailed = (errorInfo: any) => {        console.log('Failed:', errorInfo);    };  return (  <Form            {...layout}            name="basic"            onFinish={onFinish}            onFinishFailed={onFinishFailed}        >         <Form.Item name="vcode" rules={[{ required: true, message: '请输入验证码' }]}>               <Input size="large" className="security-code" placeholder="请输入验证码" />            </Form.Item>   {}   <InputVerify onRef={(ref) => { $Child = ref }}></InputVerify>  </Form> )}

上面这种写法呢确实是React老的写法，React16.8以后都用hook了，那我也改一下，代码如下：

代码片.

import * as React from "react";const size = 4;const verifycode = {    width: "32%",    height: "32px",    marginLeft: "5%",    display:"inline-block",    position:"absolute" as "absolute",    top:"0",    right:"0",}export default ({cRef}) => {    const [code, setCode] = React.useState(Boolean);    const [options,setOptions] = React.useState({                id: "verifycode", //容器Id                canvasId: "verifyCanvas", //canvas的ID                width: 150, //默认canvas宽度                height: 47, //默认canvas高度                type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母                code: "",                numArr: "0,1,2,3,4,5,6,7,8,9".split(","),                letterArr: getAllLetter(),});    React.useImperativeHandle(cRef,()=>({        validate : (vcode) => {            var vcode = vcode.toLowerCase();            var v_code = options.code.toLowerCase();            if (vcode == v_code) {                setCode(true);            } else {                refresh();                setCode(false);            }            return code;        }    }));    React.useEffect(()=>{        _init();        refresh();    })    function _init() {        let con = document.getElementById(options.id);        let canvas : any = document.createElement("canvas");        options.width = con.offsetWidth > 0 ? con.offsetWidth : 150;        options.height = con.offsetHeight > 0 ? con.offsetHeight : 47;        canvas.id = options.canvasId;        canvas.width = options.width;        canvas.height = options.height;        canvas.style.cursor = "pointer";        canvas.innerHTML = "您的浏览器版本不支持canvas";        con.appendChild(canvas);        canvas.onclick = function () {            refresh();        }    }    function refresh() {        options.code = "";        let canvas : any = document.getElementById(options.canvasId);        let ctx = null;        if (canvas.getContext) {            ctx = canvas.getContext('2d');        } else {            return;        }        ctx.clearRect(0, 0, options.width, options.height);        ctx.textBaseline = "middle";        ctx.fillStyle = randomColor(180, 240);        ctx.fillStyle = "rgba(0,0,0,0)";//背景色        ctx.fillRect(0, 0, options.width, options.height);        if (options.type == "blend") { //判断验证码类型            var txtArr = options.numArr.concat(options.letterArr);        } else if (options.type == "number") {            var txtArr = options.numArr;        } else {            var txtArr = options.letterArr;        }        for (var i = 1; i <= size; i++) {            var txt = txtArr[randomNum(0, txtArr.length)];            options.code += txt;            ctx.font = randomNum(options.height / 2, options.height) + 'px SimHei'; //随机生成字体大小            ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色                   // ctx.fillStyle = "rgb(46, 137, 255)";//固定字体颜色            ctx.shadowOffsetX = randomNum(-3, 3);            ctx.shadowOffsetY = randomNum(-3, 3);            ctx.shadowBlur = randomNum(-3, 3);            ctx.shadowColor = "rgba(0, 0, 0, 0.3)";            var x = options.width / (size + 1) * i;            var y = options.height / 2;            var deg = randomNum(-30, 30);                        ctx.translate(x, y);            ctx.rotate(deg * Math.PI / 180);            ctx.fillText(txt, 0, 0);                        ctx.rotate(-deg * Math.PI / 180);            ctx.translate(-x, -y);        }                for (var i = 0; i < 4; i++) {            ctx.strokeStyle = randomColor(40, 180);            ctx.beginPath();            ctx.moveTo(randomNum(0, options.width), randomNum(0, options.height));            ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));            ctx.stroke();        }    }            function getAllLetter() {        var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";        return letterStr.split(",");    }        function randomNum(min: any, max: any) {        return Math.floor(Math.random() * (max - min) + min);    }        function randomColor(min, max) {        var r = randomNum(min, max);        var g = randomNum(min, max);        var b = randomNum(min, max);        return "rgb(" + r + "," + g + "," + b + ")";    }    return (        <div id="verifycode" style={verifycode}></div>    )}

调用也简单，父组件声明一个React.useRef，传给子组件

const childRef = React.useRef<any>();//这里code通过antD的Form表单的onFinish事件获得//调用子组件方法childRef.current.validate(code)<InputVerify cRef={childRef}></InputVerify>

好了，效果如下图：

React tsx如何生成随机验证码