📱 Cómo validar un número de teléfono en React 📱
¿Por Qué Es Importante Validar Números de Teléfono?
La validación de números de teléfono ayuda a:
- Evitar errores humanos: Los usuarios pueden cometer errores al ingresar su número de teléfono. La validación ayuda a detectar y corregir estos errores antes de que se envíen los datos.
- Mejorar la calidad de los datos: Datos correctos y consistentes son cruciales para cualquier operación de negocio.
- Seguridad: Minimiza los riesgos asociados con datos incorrectos o falsos.
Paso 1: Crear una Nueva Aplicación React
Primero, crearemos una nueva aplicación React. Abre tu terminal y ejecuta:
npx create-react-app validar-telefono
cd validar-telefono
npm start
Esto iniciará tu aplicación React en localhost:3000.
Paso 2: Crear el Componente de Validación
Vamos a crear un componente simple para manejar la entrada y validación del número de teléfono. Crea un archivo llamado PhoneInput.js dentro de la carpeta src:
import React, { useState } from 'react';
const PhoneInput = () => {
const [phone, setPhone] = useState('');
const [error, setError] = useState('');
const validatePhone = (value) => {
const phonePattern = /^[0-9]{10}$/;
if (phonePattern.test(value)) {
setError('');
} else {
setError('Número de teléfono inválido. Debe contener 10 dígitos.');
}
};
const handleChange = (e) => {
const value = e.target.value;
setPhone(value);
validatePhone(value);
};
return (
<div>
<label htmlFor="phone">Número de Teléfono:</label>
<input
type="text"
id="phone"
value={phone}
onChange={handleChange}
placeholder="Ingrese su número de teléfono"
/>
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
};
export default PhoneInput;
En este código, hemos definido un componente PhoneInput que:
- Utiliza el estado para almacenar el número de teléfono y los mensajes de error.
- Valida el número de teléfono utilizando una expresión regular que verifica que el valor ingresado tenga exactamente 10 dígitos.
Paso 3: Integrar el Componente en la Aplicación
Ahora, integraremos este componente en la aplicación principal. Abre src/App.js y modifica el contenido para incluir el nuevo componente PhoneInput:
import React from 'react';
import PhoneInput from './PhoneInput';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Validación de Teléfono en React</h1>
<PhoneInput />
</header>
</div>
);
}
export default App;Paso 4: Probar la Aplicación
Con el servidor en ejecución (npm start), abre tu navegador y ve a http://localhost:3000. Deberías ver tu formulario de validación de teléfono. Prueba ingresando diferentes números para ver cómo responde el sistema de validación.
Validaciones Adicionales
Para validaciones más complejas, puedes usar librerías como libphonenumber-js. Aquí te mostramos cómo integrarla:
1. Instala la librería:
npm install libphonenumber-js
2. Modifica PhoneInput.js para usar libphonenumber-js:
import React, { useState } from 'react';
import { parsePhoneNumberFromString } from 'libphonenumber-js';
const PhoneInput = () => {
const [phone, setPhone] = useState('');
const [error, setError] = useState('');
const validatePhone = (value) => {
const phoneNumber = parsePhoneNumberFromString(value, 'US');
if (phoneNumber && phoneNumber.isValid()) {
setError('');
} else {
setError('Número de teléfono inválido.');
}
};
const handleChange = (e) => {
const value = e.target.value;
setPhone(value);
validatePhone(value);
};
return (
<div>
<label htmlFor="phone">Número de Teléfono:</label>
<input
type="text"
id="phone"
value={phone}
onChange={handleChange}
placeholder="Ingrese su número de teléfono"
/>
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
};
export default PhoneInput;Esta implementación mejora la validación, haciéndola más robusta y permitiendo la validación de números internacionales.
Jorge García
Fullstack developer