La validación de la longitud del número de teléfono móvil es un paso importante para verificar si el número ingresado por el usuario es genuino o no. Material UI for React tiene este componente disponible para nosotros y es muy fácil de integrar. Podemos usar la propiedad de error para el componente TextField en ReactJS usando el siguiente enfoque.
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 los módulos material-ui usando el siguiente comando:
npm install @material-ui/core
Estructura del proyecto: Tendrá el siguiente aspecto.
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 TextField from "@material-ui/core/TextField"; import InputAdornment from "@material-ui/core/InputAdornment"; const App = () => { const [mobile, setmobile] = useState(""); const [isError, setIsError] = useState(false); return ( <div style={{ marginLeft: "40%", }} > <h2>Validate Mobile number length in ReactJS?</h2> <TextField type="tel" error={isError} value={mobile} label="Enter Phone Number" onChange={(e) => { setmobile(e.target.value); if (e.target.value.length > 10) { setIsError(true); } }} InputProps={{ startAdornment: <InputAdornment position="start"> +91 </InputAdornment>, }} /> <h3>Your Mobile Number is: +91 {mobile} </h3> </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
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida. En el ejemplo anterior, podemos ver cuando el usuario excede los 10 dígitos, el color de TextField cambia a rojo para indicar el error, así es como podemos validar la longitud del número de móvil en ReactJS.
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA