При разработке веб-приложений часто необходимо ограничить ввод данных пользователем по определенным критериям. Одним из общих требований является запрет пользователям вводить числа, превышающие определенный порог. В этой статье блога мы рассмотрим несколько способов достижения этого ограничения, приведя попутно примеры кода.

Метод 1: JavaScript с HTML
Один простой подход — использовать JavaScript для проверки ввода пользователя на стороне клиента перед отправкой формы. Вот пример использования HTML и JavaScript:

<form>
  <label for="numberInput">Enter a number:</label>
  <input type="number" id="numberInput" name="numberInput">
  <button type="submit">Submit</button>
</form>
<script>
  const form = document.querySelector('form');
  const numberInput = document.querySelector('#numberInput');
  form.addEventListener('submit', (event) => {
    const threshold = 100; // Change this to your desired threshold
    const enteredNumber = parseInt(numberInput.value);
    if (enteredNumber > threshold) {
      event.preventDefault();
      alert('Number exceeds the threshold!');
    }
  });
</script>

Метод 2: проверка на стороне сервера
Проверка на стороне клиента отлично подходит для предоставления немедленной обратной связи пользователю, но ее можно обойти. Для обеспечения целостности данных необходима проверка на стороне сервера. Вот пример использования Node.js:

// Express.js route handler
app.post('/submit', (req, res) => {
  const threshold = 100; // Change this to your desired threshold
  const enteredNumber = parseInt(req.body.numberInput);
  if (enteredNumber > threshold) {
    res.status(400).send('Number exceeds the threshold!');
  } else {
    // Process the valid input
    // ...
    res.send('Input accepted!');
  }
});

Метод 3: входные атрибуты HTML5
В HTML5 введены различные входные атрибуты для обеспечения проверки данных. Для чисел вы можете использовать атрибуты minи max. Вот пример:

<input type="number" id="numberInput" name="numberInput" min="0" max="100">

Метод 4: регулярные выражения
Другой вариант — использовать регулярные выражения для проверки ввода пользователя. Вот пример использования JavaScript:

const threshold = 100; // Change this to your desired threshold
const enteredNumber = parseInt(numberInput.value);
const regex = /^[0-9]+$/;
if (!regex.test(enteredNumber) || enteredNumber > threshold) {
  // Handle invalid input
}

В этой статье мы рассмотрели несколько методов ограничения ввода данных пользователем за пределы определенного порогового значения. Реализуя проверку на стороне клиента с помощью JavaScript, проверку на стороне сервера, входные атрибуты HTML5 или регулярные выражения, вы можете гарантировать, что ваше веб-приложение принимает только допустимые данные в пределах желаемого диапазона. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и начните внедрять расширенную проверку входных данных уже сегодня!