React tsx生成隨機(jī)驗(yàn)證碼
React tsx 生成隨機(jī)驗(yàn)證碼,供大家參考,具體內(nèi)容如下
最近開(kāi)發(fā)React 使用tsx編寫(xiě),沒(méi)有找到什么好的隨機(jī)生成驗(yàn)證碼的插件,自己就手?jǐn)]了一個(gè),廢話(huà)不多話(huà),直接上代碼。
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", //默認(rèn)canvas寬度 height: "47", //默認(rèn)canvas高度 type: "blend", //圖形驗(yàn)證碼默認(rèn)類(lèi)型blend:數(shù)字字母混合類(lèi)型、number:純數(shù)字、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);// 調(diào)用父組件傳入的函數(shù),把自身賦給父組件 } _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") { //判斷驗(yàn)證碼類(lèi)型 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'; //隨機(jī)生成字體大小 ctx.fillStyle = this.randomColor(50, 160); //隨機(jī)生成字體顏色 // 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); /**設(shè)置旋轉(zhuǎn)角度和坐標(biāo)原點(diǎn)**/ ctx.translate(x, y); ctx.rotate(deg * Math.PI / 180); ctx.fillText(txt, 0, 0); /**恢復(fù)旋轉(zhuǎn)角度和坐標(biāo)原點(diǎn)**/ ctx.rotate(-deg * Math.PI / 180); ctx.translate(-x, -y); } /**繪制干擾線(xiàn)**/ 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; } } /**生成字母數(shù)組**/ 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(","); } /**生成一個(gè)隨機(jī)數(shù)**/ randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min); } /**生成一個(gè)隨機(jī)色**/ 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"
這樣已經(jīng)能自動(dòng)生成驗(yàn)證碼了,如何進(jìn)行驗(yàn)證了,我這里也簡(jiǎn)單貼出來(lái),這里Form用的antd,一看就懂
代碼片.
export default ($Child: any = {}) => { //Form提交的方法 const onFinish = (values: any) => { if (values.vcode) { console.log($Child.validate(values.vcode))//調(diào)用子組件的方法驗(yàn)證 } }; 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: '請(qǐng)輸入驗(yàn)證碼' }]}> <Input size="large" className="security-code" placeholder="請(qǐng)輸入驗(yàn)證碼" /> </Form.Item> {/* 這里通過(guò)onRef來(lái)父組件調(diào)用子組件的方法 */} <InputVerify onRef={(ref) => { $Child = ref }}></InputVerify> </Form> ) }
上面這種寫(xiě)法呢確實(shí)是React老的寫(xiě)法,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, //默認(rèn)canvas寬度 height: 47, //默認(rèn)canvas高度 type: "blend", //圖形驗(yàn)證碼默認(rèn)類(lèi)型blend:數(shù)字字母混合類(lèi)型、number:純數(shù)字、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") { //判斷驗(yàn)證碼類(lèi)型 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'; //隨機(jī)生成字體大小 ctx.fillStyle = randomColor(50, 160); //隨機(jī)生成字體顏色 // 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); /**設(shè)置旋轉(zhuǎn)角度和坐標(biāo)原點(diǎn)**/ ctx.translate(x, y); ctx.rotate(deg * Math.PI / 180); ctx.fillText(txt, 0, 0); /**恢復(fù)旋轉(zhuǎn)角度和坐標(biāo)原點(diǎn)**/ ctx.rotate(-deg * Math.PI / 180); ctx.translate(-x, -y); } /**繪制干擾線(xiàn)**/ 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(); } } /**生成字母數(shù)組**/ 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(","); } /**生成一個(gè)隨機(jī)數(shù)**/ function randomNum(min: any, max: any) { return Math.floor(Math.random() * (max - min) + min); } /**生成一個(gè)隨機(jī)色**/ 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> ) }
調(diào)用也簡(jiǎn)單,父組件聲明一個(gè)React.useRef,傳給子組件
const childRef = React.useRef<any>(); //這里code通過(guò)antD的Form表單的onFinish事件獲得 //調(diào)用子組件方法 childRef.current.validate(code) <InputVerify cRef={childRef}></InputVerify>
好了,效果如下圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題
這篇文章主要介紹了React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12react antd表格中渲染一張或多張圖片的實(shí)例
這篇文章主要介紹了react antd表格中渲染一張或多張圖片的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10React Native按鈕Touchable系列組件使用教程示例
這篇文章主要為大家介紹了React Native按鈕Touchable系列組件使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11react中代碼塊輸出,代碼高亮顯示,帶行號(hào),能復(fù)制的問(wèn)題
這篇文章主要介紹了react中代碼塊輸出,代碼高亮顯示,帶行號(hào),能復(fù)制的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09詳解React Native開(kāi)源時(shí)間日期選擇器組件(react-native-datetime)
本篇文章主要介紹了詳解React Native開(kāi)源時(shí)間日期選擇器組件(react-native-datetime),具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09react-native中路由頁(yè)面的跳轉(zhuǎn)與傳參的實(shí)例詳解
這篇文章主要介紹了react-native中路由頁(yè)面的跳轉(zhuǎn)與傳參,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08React引入css的幾種方式及應(yīng)用小結(jié)
這篇文章主要介紹了React引入css的幾種方式及應(yīng)用小結(jié),操作styled組件的樣式屬性,可在組件標(biāo)簽上定義屬性、也可以通過(guò)attrs定義屬性,本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03React native ListView 增加頂部下拉刷新和底下點(diǎn)擊刷新示例
這篇文章主要介紹了React native ListView 增加頂部下拉刷新和底下點(diǎn)擊刷新示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04React?Native實(shí)現(xiàn)Toast輕提示和loading效果
這篇文章主要介紹了React Native實(shí)現(xiàn)Toast輕提示和loading效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09