¿Cómo validar el número Octal en ReactJS?

También se conoce el número ctal . 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.

Javascript

import React, { useState } from "react";
import validator from 'validator'
  
const App = () => {
  
  const [errorMessage, setErrorMessage] = useState('')
    
  const validate = (value) => {
    
    if (validator.isOctal(value)) {
      setErrorMessage('Is Octal Number')
    } else {
      setErrorMessage('Is Not Octal Number')
    }
  }
  
  return (
    <div style={{
      marginLeft: '200px',
    }}>
      <pre>
        <h2>Validating Octal Number in ReactJS</h2>
        <span>Enter Number: </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 un número octal no válido como se muestra a continuación:

  • El siguiente será el resultado si el usuario ingresa un número octal válido como se muestra a continuación:

Publicación traducida automáticamente

Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *