¿Cómo validar un correo electrónico en ReactJS?

La validación del correo electrónico es un paso importante en cada aplicación para autenticar el correo electrónico del usuario. Se puede lograr usando el módulo de validación en ReactJS. El siguiente ejemplo muestra cómo validar el correo electrónico ingresado por el usuario y verificar si es válido o no utilizando el módulo npm en la aplicación React.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app emailvalidatordemo

Paso 2: después de crear la carpeta de su proyecto, es decir , emailvalidatordemo, acceda a ella con el siguiente comando:

cd emailvalidatordemo

Paso 3: después de crear la aplicación React, instale el módulo de validación con el siguiente comando:

npm install validator

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código para validar el correo electrónico con la interfaz de usuario básica.

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>Validating Email in ReactJS</h2>
        <span>Enter Email: </span><input type="text" id="userEmail" 
        onChange={(e) => validateEmail(e)}></input> <br />
        <span style={{
          fontWeight: 'bold',
          color: 'red',
        }}>{emailError}</span>
      </pre>
    </div>
  );
}
  
export default App

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

• El siguiente será el resultado si el usuario ingresa un correo electrónico no válido como se muestra a continuación:

• El siguiente será el resultado si el usuario ingresa un correo electrónico válido como se muestra a continuación: