Лабораторная работа №10: Форма записи на бесплатный урок: валидация на клиенте

Теоретическая часть

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

Валидация на клиенте — проверка данных в браузере пользователя до отправки на сервер
Регулярные выражения — шаблоны для проверки формата строк (например, email или телефон)
Состояние ошибок — хранение информации о том, какие поля содержат ошибки
Мгновенная валидация — проверка данных при вводе или потере фокуса

Требования к валидации из задания демонстрационного экзамена:

Телефон: формат +7(XXX)-XXX-XX-XX
Email: стандартный формат электронной почты
ФИО: символы кириллицы и пробелы
Все поля обязательны для заполнения

В этой лабораторной работе мы создадим форму записи на бесплатный урок с валидацией полей на стороне клиента.

Задание

Создать форму с полями: ФИО, телефон (в формате +7(XXX)-XXX-XX-XX), email (в стандартном формате), выбор курса, согласие на обработку персональных данных. Все поля обязательны для заполнения. Ошибки валидации должны отображаться на форме.

Пошаговая инструкция

Создайте страницу записи на урок

В папке src/pages создайте файл Enroll.js.

# В терминале
touch src/pages/Enroll.js

Создайте компонент формы

В папке src/components создайте файл EnrollmentForm.js.

touch src/components/EnrollmentForm.js

Добавьте состояние для формы

Откройте файл EnrollmentForm.js и добавьте следующий код:

import React, { useState } from 'react';

function EnrollmentForm() {
  // Состояние формы
  const [formData, setFormData] = useState({
    fullName: '',
    phone: '',
    email: '',
    course: '',
    consent: false
  });
  
  // Состояние ошибок
  const [errors, setErrors] = useState({});
  
  // Состояние успешной отправки
  const [isSubmitted, setIsSubmitted] = useState(false);
  
  return (
    
      {/* Здесь будет JSX формы */}
    

  );
}

export default EnrollmentForm;

Реализуйте обработку изменений

Добавьте функцию для обработки изменений в полях формы:

const handleChange = (e) => {
  const { name, value, type, checked } = e.target;
  setFormData({
    ...formData,
    [name]: type === 'checkbox' ? checked : value
  });
  
  // При изменении поля удаляем ошибку для этого поля
  if (errors[name]) {
    const newErrors = { ...errors };
    delete newErrors[name];
    setErrors(newErrors);
  }
};

Реализуйте валидацию

Добавьте функцию для валидации формы:

const validate = () => {
  const newErrors = {};
  
  // Валидация ФИО (только кириллица и пробелы)
  if (!formData.fullName.trim()) {
    newErrors.fullName = 'ФИО обязательно для заполнения';
  } else if (!/^[А-Яа-яЁё\s]+$/.test(formData.fullName)) {
    newErrors.fullName = 'ФИО должно содержать только кириллицу и пробелы';
  }
  
  // Валидация телефона
  if (!formData.phone) {
    newErrors.phone = 'Телефон обязателен для заполнения';
  } else if (!/^\+7\(\d{3}\)-\d{3}-\d{2}-\d{2}$/.test(formData.phone)) {
    newErrors.phone = 'Телефон должен быть в формате +7(XXX)-XXX-XX-XX';
  }
  
  // Валидация email
  if (!formData.email) {
    newErrors.email = 'Email обязателен для заполнения';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
    newErrors.email = 'Некорректный формат email';
  }
  
  // Валидация выбора курса
  if (!formData.course) {
    newErrors.course = 'Выберите курс';
  }
  
  // Валидация согласия
  if (!formData.consent) {
    newErrors.consent = 'Необходимо согласие на обработку персональных данных';
  }
  
  setErrors(newErrors);
  return Object.keys(newErrors).length === 0;
};

Создайте JSX формы

Добавьте следующий код в функцию return():

return (

Запись на бесплатный урок

{isSubmitted ? (

Спасибо за запись!

Мы свяжемся с вами в ближайшее время.

) : (

{e.preventDefault(); handleFormSubmit();}}>

ФИО* {errors.fullName &&

{errors.fullName}

}

Телефон* {errors.phone &&

{errors.phone}

}

Email* {errors.email &&

{errors.email}

}

Выберите курс* {errors.course &&

{errors.course}

}

Согласен(а) на обработку персональных данных* {errors.consent &&

{errors.consent}

}

)}

);

Реализуйте отправку формы

Добавьте функцию для обработки отправки формы:

const handleFormSubmit = () => {
  if (validate()) {
    console.log('Форма валидна', formData);
    // Здесь будет отправка данных
    setIsSubmitted(true);
    
    // Сброс формы после успешной отправки
    setTimeout(() => {
      setFormData({
        fullName: '',
        phone: '',
        email: '',
        course: '',
        consent: false
      });
      setIsSubmitted(false);
    }, 5000);
  }
};

Настройте маршрутизацию и проверьте результат

Добавьте страницу Enroll в маршрутизацию и проверьте работу формы с валидацией.

Если при вводе некорректных данных появляются сообщения об ошибках, а при вводе корректных данных форма отправляется успешно, значит, валидация реализована верно.

Критерий	Баллы
Валидация телефона	3
Валидация email	3
Ошибки отображаются	2
Регулярные выражения	2
Итого	10

Связь с демонстрационным экзаменом

Эта лабораторная работа связана с профессиональной компетенцией:

ПК: Создавать программный код на стороне клиента в соответствии с техническим заданием

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

Согласно документу КОД 09.02.09-1-2025, на экзамене оценивается:

Навык разработки клиентской части веб-приложения в соответствии с техническим заданием
Умение применять выбранные языки программирования для написания программного кода

Лабораторная работа №10: Форма записи на бесплатный урок: валидация на клиенте

Цель работы

Теоретическая часть

Задание

Пошаговая инструкция

Запись на бесплатный урок

Спасибо за запись!

Критерии оценки

Связь с демонстрационным экзаменом