jQuery Academy · Урок

Логика проверки форм на стороне клиента

«Логика проверки форм на стороне клиента» — бесплатный урок jQuery Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Зачем проверять формы на стороне клиента?

Проверка формы на стороне клиента проверяет введённые пользователем данные до их отправки на сервер. Это важный этап создания удобных веб-приложений.

Улучшение взаимодействия с пользователем: Пользователь сразу получает информацию об ошибках и может исправить их, не дожидаясь ответа сервера.
Снижение нагрузки на сервер: Некорректные данные обнаруживаются заранее, поэтому серверу не приходится обрабатывать ненужные запросы.
Более быстрые взаимодействия: Отсутствие перезагрузки страницы делает работу с формой более быстрой и отзывчивой.

За пределами базовой проверки HTML5

HTML5 предлагает базовые атрибуты проверки, такие как required, type="email" и pattern. Хотя они полезны, им часто не хватает гибкости для сложных бизнес-правил или настраиваемых сообщений.

Например, HTML5 не позволяет легко проверить, соответствует ли пароль определённым требованиям к надёжности (например, содержит ли он не менее 8 символов, одну цифру и один специальный символ), или совпадают ли два поля для ввода пароля. Здесь на помощь приходит jQuery!

Перехват отправки формы

Первый шаг при создании собственной проверки — предотвратить стандартную отправку формы браузером. Для этого мы используем обработчик события .submit() в jQuery и event.preventDefault().

Это позволяет сначала выполнить нашу логику проверки. Если форма корректна, мы можем отправить её вручную (или передать данные с помощью AJAX — это будет рассмотрено в другом уроке).

<!-- HTML part (imagine this exists) -->
<form id="myForm">
  <input type="text" id="username" required>
  <button type="submit">Submit</button>
</form>

<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      // Stop the form from submitting normally
      event.preventDefault(); 
      console.log("Form submission intercepted!");
      // Here, you'd add your validation logic
    });
  });
</script>

Структура собственной функции проверки

Рекомендуется помещать логику проверки в повторно используемую функцию. Эта функция может возвращать true, если форма корректна, и false в противном случае.

Затем эту функцию можно вызвать внутри обработчика события submit формы, чтобы решить, продолжать ли отправку.

<!-- HTML part -->
<form id="loginForm">
  <input type="text" id="email" placeholder="Email">
  <button type="submit">Login</button>
</form>

<script>
  function validateLoginForm() {
    let isValid = true;
    const email = $('#email').val();

    if (email === '' || !email.includes('@')) {
      console.log("Invalid email!");
      isValid = false;
    }
    // More validation checks here...
    return isValid;
  }

  $(document).ready(function() {
    $('#loginForm').submit(function(event) {
      event.preventDefault();
      if (validateLoginForm()) {
        console.log("Form is valid! Submitting...");
        // $(this).off('submit').submit(); // To submit programmatically
      } else {
        console.log("Form has errors. Please fix.");
      }
    });
  });
</script>

Проверка длины текстового поля

Распространённое правило проверки — контролировать минимальную или максимальную длину введённого текста. Это легко сделать: получить результат .val() для поля и проверить его свойство .length.

Зададим минимальную длину имени пользователя — 5 символов.

<!-- HTML part -->
<form id="userForm">
  <input type="text" id="username" placeholder="Username">
  <button type="submit">Create User</button>
</form>

<script>
  function validateUsernameLength() {
    const username = $('#username').val();
    if (username.length < 5) {
      console.log("Username must be at least 5 characters long.");
      return false;
    }
    return true;
  }

  $(document).ready(function() {
    $('#userForm').submit(function(event) {
      event.preventDefault();
      if (validateUsernameLength()) {
        console.log("Username is valid!");
      } else {
        console.log("Validation failed.");
      }
    });
  });
</script>

Мгновенная обратная связь для пользователя

Просто записывать ошибки в консоль недостаточно! Нужно показывать понятную и своевременную информацию непосредственно на странице. Можно добавлять сообщения об ошибках рядом с полями или выделять некорректные поля.

Мы добавим элемент <span>, который будет показывать сообщение об ошибке, если имя пользователя слишком короткое.

<!-- HTML part -->
<form id="userFormFeedback">
  <label for="usernameFeedback">Username:</label>
  <input type="text" id="usernameFeedback" placeholder="Min 5 chars">
  <span id="usernameError" style="color: red;"></span>
  <button type="submit">Create User</button>
</form>

<script>
  $(document).ready(function() {
    $('#userFormFeedback').submit(function(event) {
      event.preventDefault();
      const username = $('#usernameFeedback').val();
      const $errorSpan = $('#usernameError');

      if (username.length < 5) {
        $errorSpan.text("Username too short!");
        $('#usernameFeedback').css('border', '1px solid red');
      } else {
        $errorSpan.text("");
        $('#usernameFeedback').css('border', '');
        console.log("Username is valid!");
      }
    });
  });
</script>

Проверка электронной почты с помощью регулярных выражений

Для сопоставления со сложными шаблонами, например форматами адресов электронной почты, регулярные выражения незаменимы. Метод RegExp.test() в JavaScript идеально подходит для этой задачи.

Простое регулярное выражение для электронной почты может проверять наличие символов, символа «@» и домена. Помните, что слишком строгое регулярное выражение для электронной почты может оказаться чрезмерно сложным, поэтому стремитесь к разумному балансу.

<!-- HTML part -->
<form id="emailForm">
  <label for="userEmail">Email:</label>
  <input type="text" id="userEmail" placeholder="your@example.com">
  <span id="emailError" style="color: red;"></span>
  <button type="submit">Subscribe</button>
</form>

<script>
  $(document).ready(function() {
    $('#emailForm').submit(function(event) {
      event.preventDefault();
      const email = $('#userEmail').val();
      const $errorSpan = $('#emailError');
      // Basic email regex: something@something.something
      const emailRegex = /^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}$/;

      if (!emailRegex.test(email)) {
        $errorSpan.text("Invalid email format.");
        $('#userEmail').css('border', '1px solid red');
      } else {
        $errorSpan.text("");
        $('#userEmail').css('border', '');
        console.log("Email is valid!");
      }
    });
  });
</script>

Проверка числового диапазона

Иногда нужно убедиться, что число входит в определённый диапазон (например, возраст от 18 до 65 лет или количество от 1 до 100). Можно преобразовать введённое значение в число и выполнить простые сравнения.

Всегда преобразуйте строковое значение в число с помощью parseInt() или parseFloat() перед числовыми сравнениями.

<!-- HTML part -->
<form id="ageForm">
  <label for="userAge">Your Age:</label>
  <input type="number" id="userAge" placeholder="Enter age">
  <span id="ageError" style="color: red;"></span>
  <button type="submit">Submit Age</button>
</form>

<script>
  $(document).ready(function() {
    $('#ageForm').submit(function(event) {
      event.preventDefault();
      const ageInput = $('#userAge').val();
      const age = parseInt(ageInput, 10); // Convert to integer
      const $errorSpan = $('#ageError');

      if (isNaN(age) || age < 18 || age > 65) {
        $errorSpan.text("Age must be between 18 and 65.");
        $('#userAge').css('border', '1px solid red');
      } else {
        $errorSpan.text("");
        $('#userAge').css('border', '');
        console.log("Age is valid!");
      }
    });
  });
</script>

Объединение нескольких правил проверки

Для одного поля или нескольких полей формы часто требуется применить несколько правил проверки. Эти проверки можно объединить в одной функции проверки.

Распространённый подход — сначала считать данные корректными, а затем присвоить isValid = false, если какое-либо правило не выполнено. Так можно собрать все ошибки и показать их пользователю одновременно.

Вызывать отдельные вспомогательные функции проверки.
Сохранять результаты в логическом флаге.
Показывать все относящиеся к делу сообщения об ошибках.

Проверьте навыки проверки

Рассмотрим поле формы для «кода продукта», которое должно соответствовать двум правилам:

Оно должно содержать ровно 6 символов.
Оно должно содержать только заглавные буквы и цифры (A-Z, 0-9).

Какой фрагмент jQuery правильно проверяет поле productCode и показывает сообщение об ошибке?

Повторение: проверка на стороне клиента

В этом уроке Вы узнали, как реализовать надёжную проверку форм на стороне клиента с помощью jQuery. Мы рассмотрели:

важность проверки на стороне клиента для удобства пользователя и производительности;
перехват отправки формы с помощью event.preventDefault();
структуру собственных функций проверки;
реализацию правил для длины текста, шаблонов электронной почты (регулярных выражений) и числовых диапазонов;
предоставление понятной и своевременной обратной связи пользователю.

Освоив эти приёмы, Вы сможете создавать более интерактивные формы, устойчивые к ошибкам!

Часто задаваемые вопросы

Урок «Логика проверки форм на стороне клиента» бесплатный?

Да — полный текст урока «Логика проверки форм на стороне клиента» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Логика проверки форм на стороне клиента»?

Реализуйте расширенные правила проверки на стороне клиента, обеспечивайте пользователям немедленную обратную связь и сохраняйте целостность данных перед отправкой с помощью пользовательской проверки… Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Логика проверки форм на стороне клиента»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Динамическое управление полями формы
Логика проверки форм на стороне клиента
Отправка форм через AJAX и обратная связь

← Назад к jQuery Academy