Для валидации номера телефона в React приложении при вводе пользователем можно использовать следующий подход:
Создать состояние для номера телефона и ошибки валидации:
const [phone, setPhone] = useState('');
const [phoneError, setPhoneError] = useState('');
Создать функцию для валидации номера телефона:
const validatePhone = (phone) => {
const phoneRegex = /^\d{10}$/; // регулярное выражение для 10-значного номера телефона
if (!phoneRegex.test(phone)) {
setPhoneError('Номер телефона должен содержать 10 цифр');
return false;
} else {
setPhoneError('');
return true;
}
};
Создать обработчик события onChange для поля ввода номера телефона:
const handlePhoneChange = (event) => {
const value = event.target.value;
setPhone(value);
validatePhone(value);
};
Использовать компонент input для поля ввода номера телефона и привязать к нему обработчик события onChange:
<input type="text" value={phone} onChange={handlePhoneChange} />
Добавить сообщение об ошибке валидации в зависимости от состояния phoneError
:
{phoneError && <div className="error">{phoneError}</div>}
Теперь при вводе номера телефона пользователем будет происходить валидация, и если номер не соответствует заданному формату, будет выводиться сообщение об ошибке.
Заработать пару сотен рублей онлайн на Яндекс✺Толока! Регистрируйся.
Перейти на toloka.yandex.ru/promo