Email validation is a very important step in any web application. Email Validation in ReactJS.
Email Validation can be achieved using the validator package or module in ReactJS.The below example will show how You can validate your Email input box using some very secure validation Technique.
React Application And Installing Module:
We can install react app using –
npx create-react-app emailSecure After creating the React app, Install the validator module using the below command npm install validator After installing the validator package check package.json file and make sure the validator package is installed or not. Now Below code will explain how to validate the email in react app App.js
import React, { useState } from "react";
import validator from 'validator'
const App = () => {
const [emailError, setEmailError] = useState('')
const validateEmail = (e) => {
var email = e.target.value
if (validator.isEmail(email)) {
setEmailError('Valid Email :)')
} else {
setEmailError('Enter valid Email!')
}
}
return (
<div style={{
margin: 'auto',
marginLeft: '300px',
}}>
<pre>
<h2>How to Validate an Email Address in ReactJS</h2>
<span>Enter Email: </span><input type="text" id="userEmail"
onChange={(e) => validateEmail(e)}></input> <br /><br /><br />
<h3 style={{
fontWeight: 'bold',
color: 'red',
}}>{emailError}</h3>
</pre>
</div>
);
}
export default App
Now run this project on http://localhost:3001/
Subscribe to My Programming YouTube Channel Before Downloading the code :
Read Our More Tutorials
Hide Navbar on Login Page in ReactJs