Проверка ввода на числа в JavaScript: функция checkInp()

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

В 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]+$ для букв, можно эффективно проверить тип вводимых данных.

Пройдите тест и узнайте подходит ли вам сфера IT

Пройти тест

Расширенная проверка: совершенство в деталях

Мы разобрались с базовыми принципами, теперь настало время разгадать более сложные технические детали.

Типы данных и их преобразование

Преобразование типов в 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); // Только числа, без лишних деталей

Визуализация

Воспринимайте ситуацию так, как будто ваш ввод пытается проникнуть на закрытую вечеринку:

Markdown

Скопировать код

Элитный клуб: 🚪
Охранник 1 (🔢): "Только числа, товарищ!"
Охранник 2 (🔠): "Буквы, проходите!"

И вот ваш ввод "проходит дресс-код":

Скопировать код

let input = '3.14'; // Заявка с десятичной точкой
if (/^\d*(\.\d+)?$/.test(input)) {
  // Охранник 1 пропускает числа с точками
  🚪🔢✅ 
} else if (/^[a-zA-Z]+$/.test(input)) {
  // Охранник 2 приветствует буквы
  🚪🔠✅ 
} else {
  // Оба охранника не впечатлены
  ❌
}

Результат "фейс-контроля":

Markdown

Скопировать код

Ввод '42': 🚪🔢✅ (Добро пожаловать, число!)
Ввод 'Z': 🚪🔠✅ (Проходите, буква!)
Ввод '3.14': 🚪🔢✅ (Да, это допустимое дробное число!)
Ввод '@': ❌ (Вы не проходите, попробуйте ещё!)

Мастерство проверки: углубляемся в тему

Используем возможности браузера

Браузеры поддерживают встроенные способы валидации, например, атрибут type="number" для числовых полей:

HTML

Скопировать код

<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);
  // Обновляем пользовательский интерфейс или принимаем другие действия
});

Полезные материалы

Свежие материалы

Основы компиляции программ на C

30 августа 2024

Верстка сайтов: от простого к сложному

30 августа 2024

Указатели и массивы в C

30 августа 2024