广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React tsx生成随机验证码
  • 564

0
分享到

React tsx生成随机验证码

2024-04-02 19:04:59 564人浏览 八月长安
摘要

React tsx 生成随机验证码，供大家参考，具体内容如下 最近开发React 使用tsx编写，没有找到什么好的随机生成验证码的插件，自己就手撸了一个，废话不多话，直接上代码。 t

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>

好了，效果如下图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React tsx生成随机验证码

本文链接: https://www.lsjlt.com/news/124423.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • React tsx生成随机验证码
    React tsx 生成随机验证码，供大家参考，具体内容如下 最近开发React 使用tsx编写，没有找到什么好的随机生成验证码的插件，自己就手撸了一个，废话不多话，直接上代码。 t...
    99+
    2022-11-12
  • React tsx如何生成随机验证码
    这篇文章主要介绍React tsx如何生成随机验证码，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！React tsx 生成随机验证码，具体内容如下最近开发React 使用tsx编写，没有找到什么好的随机生成验证码的插...
    99+
    2023-06-14
  • Android随机生成验证码
    Android随机生成验证码,Android利用随机数绘制不规则的验证码，加强用户登录或者注册的安全性。 具体思路如下： 在一块固定宽高的画布上，画上固定个数的随机数字和字母，...
    99+
    2022-06-06
    验证码 Android
  • python生成随机验证码
    一、生成随机验证码（纯数字及字母加数字）： import random import string checkcod='' for i in range(5): #5位验证码 ''' #纯数字验证码 #随机值1-...
    99+
    2023-01-31
    验证码 python
  • JS实现随机生成验证码
    本文实例为大家分享了JS实现随机生成验证码的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head>...
    99+
    2022-11-12
  • Python3 生成一个随机验证码
    '''设计一个八位随机验证码，验证码是由大写字母，小写字母和数字三种字符组成。定义一个范围只有1,2,3的随机数，如果这个随机数是1，则八位验证码的当前位置用大写字母；                            如果这个随机数是...
    99+
    2023-01-31
    验证码
  • QT如何生成随机验证码
    这篇“QT如何生成随机验证码”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“QT如何生成随机验证码”文章吧。一、先创建一个QT...
    99+
    2023-07-02
  • Android实现随机生成验证码
    本文实例为大家分享了Android验证码的随机生成代码，供大家参考，具体内容如下 Code.java package com.example.myapp; import and...
    99+
    2022-11-12
  • JavaScript中怎么生成随机验证码
    这篇文章将为大家详细讲解有关JavaScript中怎么生成随机验证码，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。利用canvas制作一个随机验证码：　　1...
    99+
    2022-10-19
  • QT生成随机验证码的方法
    本文实例为大家分享了QT生成随机验证码的具体代码，供大家参考，具体内容如下 一、先创建一个QT应用程序，在ui中添加一个QFrame控件，后期将这个控件提升为下面自己实现验证码的类就...
    99+
    2022-11-13
  • php怎么能随机生成验证码
    这篇文章给大家分享的是有关php怎么能随机生成验证码的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。代码如下：<phpclass functions{    ...
    99+
    2023-06-15
  • JavaScript实现随机生成验证码及校验
    本文实例为大家分享了JavaScript实现随机生成验证码及校验的具体代码，供大家参考，具体内容如下 输入验证码（区分大小写）点击确认，进行校验。出错就弹框提示 点击 看不清 重新随...
    99+
    2022-11-12
  • java实现随机验证码图片生成
    本文实例为大家分享了java生成随机验证码图片的具体代码，供大家参考，具体内容如下 1.controller @GetMapping(value = "/getRan...
    99+
    2022-11-12
  • js如何随机生成一个验证码
    这篇文章给大家分享的是有关js如何随机生成一个验证码的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果：html代码：<p>验证码：</p>  ...
    99+
    2022-10-19
  • python生成随机图形验证码详解
    使用python生成随机图片验证码,需要使用pillow模块 1.安装pillow模块 pip install pillow 2.pillow模块的基本使用 1.创建图片 from PIL imp...
    99+
    2022-06-04
    验证码 详解 图形
  • 利用Python生成随机验证码详解
    目录1.先搞环境2.开始码代码3. 加干扰4. 加入更多的干扰5. 验证码 + 随机字符6. 验证码保存本地（选）最近感觉被大数据定义成机器人了，随便看个网页都跳验证码。 怎么用p...
    99+
    2022-11-13
  • 利用Python生成随机4位验证码
    """            作者：白            时间：2018年1月8日            功能: 生成随机4位验证码（必须由两个2字母和2个数字组成） """ import  random def main():   ...
    99+
    2023-01-31
    验证码 Python
  • java随机验证码生成实现实例代码
    java随机验证码生成实现实例代码摘要: 在项目中有很多情况下都需要使用到随机验证码，这里提供一个java的随机验证码生成方案，可以指定难度，生成的验证码可以很方便的和其他组件搭配之前要使用一个生成随机验证码的功能，在网上找了一下，有很多的...
    99+
    2023-05-31
    java 随机 验证码
  • Python生成随机验证码的两种方法
    使用python生成随机验证码的方法有很多种，今天小编给大家分享两种方法，大家可以灵活运用这两种方法，设计出适合自己的验证码方法。 方法一： 利用range方法，对于range方法不清楚的同学，请参考文章《...
    99+
    2022-06-04
    两种 验证码 方法
  • Python使用PIL模块生成随机验证码
    Python生成随机验证码，需要使用PIL模块，具体内容如下 安装： pip3 install pillow 基本使用 1. 创建图片 from PIL import Image img = I...
    99+
    2022-06-04
    验证码 模块 Python
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作