ReactJs tutorial for beginners and professionals provides in-depth knowledge of ReactJs scripting language. Our ReactJs tutorial will help you to learn the ReactJs scripting language easily.
Learn about React Bootstrap https://react-bootstrap.github.io/components/modal/
This ReactJs tutorial covers all the topics of ReactJs such as introduction, control statements, functions, array, string, file handling, form handling, regular expression, date and time, object-oriented programming in ReactJs, math, ReactJs MySQL, ReactJs with Ajax, ReactJs with jQuery and ReactJs with XML
Download Source Code: Captcha in ReactJS
Using jquery and ReactJS we can captcha code. Captcha.js file
import 'bootstrap/dist/css/bootstrap.min.css';
import captchaImg from './captcha.jpg';
import studentIMG from './2.png';
import React, { useState, useEffect } from 'react';
function Captcha() {
const [user, setUser] = useState({
username:""
});
const characters ='abc123';
function generateString(length)
{
let result = '';
const charactersLength = characters.length;
for ( let i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
const captcha = generateString(6) // Function called here and save in captcha variable
let handleChange = (e) => {
let name = e.target.name;
let value = e.target.value;
user[name] = value;
setUser(user);
}
const onSubmit = e => {
var element = document.getElementById("succesBTN");
var inputData = document.getElementById("inputType");
element.style.cursor = "wait";
element.innerHTML = "Checking...";
inputData.disabled = true;
element.disabled = true;
var myFunctions = function(){
if(captcha == user.username)
{
element.style.backgroundColor = "green";
element.innerHTML = "Captcha Verified";
element.disabled = true;
element.style.cursor = "not-allowed";
inputData.style.display = "none";
}
else
{
element.style.backgroundColor = "red";
element.style.cursor = "not-allowed";
element.innerHTML = "Not Matched";
element.disabled = true;
// element.disabled = true;
var myFunction = function(){
element.style.backgroundColor = "#007bff";
element.style.cursor = "pointer";
element.innerHTML = "Verify Captcha";
element.disabled = false;
inputData.disabled = false;
inputData.value ='sssss';
};
setTimeout(myFunction,5000);
}
}
setTimeout(myFunctions,5000);
};
return (
<div class="container">
<h4 className="text-center mt-4 text-info"><b> Validate Captcha using REACT JS</b></h4>
<div class="row mt-4">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h4 id="captcha" style={{ marginTop:"162px",marginLeft:"25px",position:"absolute"}}>{captcha}</h4>
<div class="form-group row">
<img src={studentIMG} className="mt-3 mb-3" height="90"/> <span class="font-weight-bold ml-3" style={{ marginTop:"50px"}} >Mariah Benchos</span>
</div>
<div class="form-group row">
<img src={captchaImg} className="mt-3 mb-3" height="50"/>
</div>
<div class="form-group row">
<input type="text" id="inputType" className="form-control"placeholder="Enter Captcha"
name="username" onChange={handleChange} autocomplete="off" style={{width:"20%"}}
/>
<button type="button" id="succesBTN" onClick={onSubmit} class="btn btn-primary ml-1">Verify Captcha</button>
</div>
</div>
</div>
</div>
);
}
export default Captcha;
This is App.js file
import './App.css';
import Captcha from './Captcha.js';
function App() {
return (
<div className="App">
<Captcha/>
</div>
);
}
export default App;
See our More Tutorials on React