¿Cómo validar URL en ReactJS?

URL (Localizador Uniforme de Recursos) es una referencia/dirección a un recurso en Internet. Por ejemplo, www.geeksforgeeks.com es una URL. El siguiente ejemplo muestra cómo validar los datos ingresados ​​por el usuario y verificar si son válidos o no utilizando el módulo npm en la aplicación ReactJS. 

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 foldername

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

cd foldername

Paso 3: después de crear la aplicación ReactJS, 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.

import React, { useState } from "react";
import validator from 'validator'
  
const App = () => {
  
  const [errorMessage, setErrorMessage] = useState('')
    
  const validate = (value) => {
    
    if (validator.isURL(value)) {
      setErrorMessage('Is Valid URL')
    } else {
      setErrorMessage('Is Not Valid URL')
    }
  }
  
  return (
    <div style={{
      marginLeft: '200px',
    }}>
      <pre>
        <h2>Validating URL in ReactJS</h2>
        <span>Enter URL: </span><input type="text" 
        onChange={(e) => validate(e.target.value)}></input> <br />
        <span style={{
          fontWeight: 'bold',
          color: 'red',
        }}>{errorMessage}</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 una URL no válida como se muestra a continuación:

• El siguiente será el resultado si el usuario ingresa una URL válida como se muestra a continuación: