激情久久久_欧美视频区_成人av免费_不卡视频一二三区_欧美精品在欧美一区二区少妇_欧美一区二区三区的

服務器之家：專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - React - React tsx生成隨機驗證碼

React tsx生成隨機驗證碼

2022-03-09 16:08laipengfei19 React

這篇文章主要為大家詳細介紹了React tsx生成隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

React tsx 生成隨機驗證碼，供大家參考，具體內容如下

最近開發React 使用tsx編寫，沒有找到什么好的隨機生成驗證碼的插件，自己就手擼了一個，廢話不多話，直接上代碼。

tsx文件如下：

React代碼片.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
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的樣式自己修改，一般代碼片.

?
1
import InputVerify from "../InputVerify"

這樣已經能自動生成驗證碼了，如何進行驗證了，我這里也簡單貼出來，這里Form用的antd，一看就懂

代碼片.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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>
   {/* 這里通過onRef來父組件調用子組件的方法 */}
   <InputVerify onRef={(ref) => { $Child = ref }}></InputVerify>
  </Form>
 )
}

上面這種寫法呢確實是React老的寫法，React16.8以后都用hook了，那我也改一下，代碼如下：

代碼片.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
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，傳給子組件

?
1
2
3
4
5
6
const childRef = React.useRef<any>();
//這里code通過antD的Form表單的onFinish事件獲得
//調用子組件方法
childRef.current.validate(code)
 
<InputVerify cRef={childRef}></InputVerify>

好了，效果如下圖：

React tsx生成隨機驗證碼

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。

原文鏈接：https://blog.csdn.net/laipengfei19/article/details/116016325

延伸 · 閱讀

精彩推薦
  • ReactReact使用高德地圖的實現示例(react-amap)

    React使用高德地圖的實現示例(react-amap)

    這篇文章主要介紹了React使用高德地圖的實現示例(react-amap)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的...

    yzbyxmx8622022-03-05
  • React一文幫你理解PReact10.5.13源碼

    一文幫你理解PReact10.5.13源碼

    這篇文章主要介紹了一文幫你理解PReact10.5.13源碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下...

    我的小樹林5442022-02-22
  • Reactreact中的虛擬dom和diff算法詳解

    react中的虛擬dom和diff算法詳解

    這篇文章主要介紹了react中的虛擬dom和diff算法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下...

    家里有只豬4642022-03-05
  • React一看就懂的ReactJs基礎入門教程-精華版

    一看就懂的ReactJs基礎入門教程-精華版

    現在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS，ReactJs的虛擬DOM（Virtual DOM）和組件化的開發深深的吸引了我，下面來跟我一起領略...

    雲霏霏9332022-02-22
  • ReactReact中useRef的具體使用

    React中useRef的具體使用

    這篇文章主要介紹了React中useRef的具體使用，它可以用來獲取組件實例對象或者是DOM對象，除此之外還有哪些用法，就一起來了解一下...

    Meskjei6392022-02-28
  • ReactReact.cloneElement的使用詳解

    React.cloneElement的使用詳解

    因為要接手維護一些項目，團隊的技術棧最近從 vue 轉向 react ，作為一個 react 新手，加上一向喜歡通過源碼來學習新的東西，就選擇了通過閱讀 antd 這個大...

    fullstackbb11292022-02-23
  • React詳解react應用中的DOM DIFF算法

    詳解react應用中的DOM DIFF算法

    這篇文章主要介紹了react應用中的DOM DIFF算法，幫助大家更好的理解和學習使用react，感興趣的朋友可以了解下...

    time_w6302022-02-25
  • Reactreact獲取input輸入框的值的方法示例

    react獲取input輸入框的值的方法示例

    這篇文章主要介紹了react獲取input輸入框的值的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友...

    Pinkh8222022-02-24
主站蜘蛛池模板： 国产一区二区在线观看视频 | 欧美日韩免费一区 | 涩涩操 | 嗯～啊～用力～高h | 91精品福利视频 | 毛片a级毛片免费播放100 | 91精品国产九九九久久久亚洲 | 亚洲一级簧片 | 国产亚洲精品久久久久久久 | 一级大黄毛片 | www.成人在线视频 | 国产精品爱久久久久久久 | 一区二区三区在线播放视频 | 男女一边摸一边做羞羞视频免费 | 成人免费国产 | av电影网站在线 | 精品在线观看一区 | 亚洲精品欧美二区三区中文字幕 | 日本高清在线免费 | 国产成人精品午夜 | 久色成人网 | 精品一区二区三区免费爱 | 91av视频大全 | 亚洲国产一区二区三区 | 毛片韩国 | 91在线看黄 | 在线亚洲欧美日韩 | 国产视频在线播放 | 91九色视频观看 | 污片视频在线观看 | 欧美一级黄带 | 国产自在自线午夜精品视频在 | 日日天日日夜日日摸 | 欧美激情图区 | 成人免费在线观看视频 | 色柚视频网站ww色 | 欧美一级一片 | 九九热视频免费 | av最新在线观看 | 免费一级高清毛片 | 亚洲不卡 |