Получить профессию в Skypro
Проверка ввода на числа в JavaScript: функция checkInp()
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
В JavaScript для определения, являет ли введённое значение числом или буквой, обычно применяются регулярные выражения (regex):
let input = 'A'; // Вводите вашу строку!
let isNumber = /^\d+$/.test(input); // Возвращает true для числа
let isLetter = /^[a-zA-Z]+$/.test(input); // Возвращает true для буквы
console.log(isNumber ? 'Число' : isLetter ? 'Буква' : 'Неопознанный символ');Так, с использованием выражений ^\d+$ для чисел и ^[a-zA-Z]+$ для букв, можно эффективно проверить тип вводимых данных.
Расширенная проверка: совершенство в деталях
Мы разобрались с базовыми принципами, теперь настало время разгадать более сложные технические детали.
Типы данных и их преобразование
Преобразование типов в JavaScript может быть сложной задачей. Для преобразования строкового ввода в числовой и последующей проверки на число используйте унарный плюс (+):
function isNumeric(input) {
return !isNaN(+input); // Унарный плюс помогает избежать подводных камней преобразования
}Проверка формы перед отправкой – позаботимся о защите от спама
Проверка данных формы перед её отправкой – важная стадия валидации:
document.forms['myForm'].addEventListener('submit', function(event) {
let input = this.elements['inputField'].value;
if (isNaN(input) || input === '') {
alert('Введите корректное число.');
event.preventDefault(); // Отменяем отправку формы
}
});Обход регулярных выражений без лишних сложностей
Некоторые символы, вроде точки (.), могут вызывать путаницу при работе с числами из-за возможности интерпретации как десятичных. Необходимо решить, допускать их использование или нет, и подстроить под это регулярное выражение:
let isFloat = /^\d*(\.\d+)?$/.test(input); // Верно для числа с плавающей точкойОграничения на ввод – установка границ
Если предполагается, что ввод должен быть исключительно числовым, используйте следующее выражение:
let isPureNumber = /^[\d]+$/.test(input); // Только числа, без лишних деталейВизуализация
Воспринимайте ситуацию так, как будто ваш ввод пытается проникнуть на закрытую вечеринку:
Элитный клуб: 🚪
Охранник 1 (🔢): "Только числа, товарищ!"
Охранник 2 (🔠): "Буквы, проходите!"И вот ваш ввод "проходит дресс-код":
let input = '3.14'; // Заявка с десятичной точкой
if (/^\d*(\.\d+)?$/.test(input)) {
// Охранник 1 пропускает числа с точками
🚪🔢✅
} else if (/^[a-zA-Z]+$/.test(input)) {
// Охранник 2 приветствует буквы
🚪🔠✅
} else {
// Оба охранника не впечатлены
❌
}Результат "фейс-контроля":
Ввод '42': 🚪🔢✅ (Добро пожаловать, число!)
Ввод 'Z': 🚪🔠✅ (Проходите, буква!)
Ввод '3.14': 🚪🔢✅ (Да, это допустимое дробное число!)
Ввод '@': ❌ (Вы не проходите, попробуйте ещё!)Мастерство проверки: углубляемся в тему
Используем возможности браузера
Браузеры поддерживают встроенные способы валидации, например, атрибут type="number" для числовых полей:
<input type="number" name="quantity" required>Обращаем внимание на пустые строки
Пустые строки могут сломать правильное поведение функции isNaN(). Комбинация проверки на пустоту и isNaN() может быть решением:
let isEmpty = input === '';
let isNumeric = !isNaN(input) && input; // Логическая проверка приходит на помощьКомплексная проверка
Сочетание различных методов повышает надёжность валидации:
function validateInput(input) {
let isNumber = /^\d*(\.\d+)?$/.test(input);
let isLetter = /^[a-zA-Z]+$/.test(input);
let isEmpty = input === '';
if (isEmpty) {
return 'Пустой ввод – не будет принят!';
} else if (isNumber) {
return 'Число';
} else if (isLetter) {
return 'Буква';
} else {
return 'Недопустимый ввод!';
}
}Предоставляем мгновенную обратную связь для пользователя
Проверки, реализованные через события ввода или клавиш, улучшают пользовательский опыт, предоставляя мгновенную обратную связь:
document.getElementById('inputField').addEventListener('input', function() {
let validationResult = validateInput(this.value);
console.log(validationResult);
// Обновляем пользовательский интерфейс или принимаем другие действия
});Полезные материалы
- MDN Web Docs:
<input>: Элемент Формы Ввода. - Метод JavaScript isNaN().
- isNaN() – JavaScript | MDN.
- Как проверить переменную на undefined или null в JavaScript? – Stack Overflow.
- Объект JavaScript RegExp – Регулярные Выражения.
- Property key события KeyboardEvent – Веб API | MDN.
- Проверка Формы в JavaScript.