Как проверить внесенный адрес email?

@trofey2 · Регистрация: 28.12.2015

Студворк — интернет-сервис помощи студентам

добрый день. есть такая страница

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/src/style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">
    <title>Newsletter Card Component - FrontendPro Challenge</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;  
    }
      body {
        background-color: rgb(221, 223, 233);
        display: flex;
      }
      .box {
        width: 1094px;
        height: 432px;
        background: #FFFFFFFF;
        position: absolute;
        transform: translate(50%, -50%);
        top: 50%;
        right: 50%;
        display: flex;
        flex-direction: column;
        gap: 50px;
        padding: 10px 10px;
        justify-content: center;
        align-items: center;
      }
      h1 {
       font: 700 40px "Merriweather", bold;
      }
      p {
        font: 300 24px "Merriweather", serif;
      }
      label {
        
      }
      input {
        
      }
      .check {
        
      }
      .e-mail {
        display: flex;
        flex-direction: row;
        gap: 30px;
      }
      .ee {
        width: 450px;
        height: 55px;
        font-size: 20pt;
      }
      ::placeholder {
      font-size: 20pt;
      }
      .submit {
        background-color: black;
        color: white;
        width: 110px;
        border-radius: 4px;
        border: none;
      }
      .submit:active {
        background-color: rgb(114, 114, 114);
      }
      .checkb {
        display: flex;
        flex-direction: row;
        gap: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h1>Level Up Your Frontend Skills</h1>
      <p>Sign up for our free newsletter to receive weekly coding challenges that will help you improve your frontend development skills.</p>
      <div class="e-mail">
        <input type="email" class="ee" id="email" pattern=".+@example\.com" size="50" placeholder="Enter your email address">
        <input type="submit" class="submit" value="Subscribe"></div>
      <div class="checkb"><input type="checkbox">
        <label for="checkbox" class="check">By checking this box, you agree to receive our weekly newsletter containing coding challenges, tips, and other related content. You may unsubscribe from the newsletter at any time</label>
      </div>
    </div>
    <!-- Write your HTML here -->
 
    <script src="/src/script.js"></script>
  </body>
</html>

как сделать чтобы адрес емейла который вводит человек проверялся бы на предмет того чтобы адрес был скажем вида аа@aa.aa ну и символов чтобы не было запрещенных, или не знаю что еще там может потребоваться?

@black1385 · 11.07.2025, 16:12

Сообщение от trofey2

как сделать чтобы адрес емейла который вводит человек проверялся

Сам тип type="email" уже проверяет корректность адреса в html. Можно дополнительно сделать проверку в JS. Набери в поиске и найдешь кучу готовых решений. Далее можно проверять уже на бэкенде с помощью php или другого серверного языка. Тоже полно примеров.

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

@trofey2 · 16.07.2025, 15:06 **[ТС]**

а как сделать чтобы при этой проверке валидности емейла, встроенной в саму форму e-mail, отображалось сообщение если е-мейл адрес не прошел проверку?

@black1385 · 16.07.2025, 15:21

trofey2, в коде не хватает тэга <form>
При неверном наборе должна появиться всплывающая надпись.

HTML5
1
2
3
4
5
6
7
8
.......
<form action='#'>
        <input type="email" class="ee" id="email" size="50" placeholder="Enter your email address">
        <input type="submit" class="submit" value="Subscribe"></div>
      <div class="checkb"><input type="checkbox">
        <label for="checkbox" class="check">By checking this box, you agree to receive our weekly newsletter containing coding challenges, tips, and other related content. You may unsubscribe from the newsletter at any time</label>
</form>
......

krvsa · 16.07.2025, 15:25

Сообщение от trofey2

а как сделать чтобы при этой проверке валидности емейла, встроенной в саму форму e-mail, отображалось сообщение если е-мейл адрес не прошел проверку?

В том же css есть такие селекторы

CSS
1
2
:invalid
:valid

Вот пример из статьи про те селекторы...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style>
input:invalid {
  border: 2px solid red;
}
 
input:invalid + .validity-icon::before {
  content: '✖';
  color: red;
}
 
input:valid + .validity-icon::before {
  content: '✓';
  color: green;
}
 
[type="checkbox"]:invalid {
  outline: 2px solid red;
  outline-offset: 2px;
}
</style>
<form>
  <div class="form-row">
    <label for="first-name">Имя:</label>
    <input type="text" name="first-name" id="first-name" required>
    <span class="validity-icon"></span>
  </div>
  <div class="form-row">
    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email">
    <span class="validity-icon"></span>
  </div>
  <div class="form-row">
    <label>
      <input type="checkbox" name="agree" id="agree" required>
      Я согласен с политикой обработки персональных данных
    </label>
  </div>
  <div class="form-row">
    <button type="submit">Отправить</button>
  </div>
</form>

Сама статья...
https://doka.guide/css/invalid-valid/

@trofey2 · 16.07.2025, 15:40 **[ТС]**

Сообщение от black1385

trofey2, в коде не хватает тэга <form>

а что в вашем теге form делает action='#'?

Добавлено через 7 минут

Сообщение от black1385

При неверном наборе должна появиться всплывающая надпись.
HTML5

а при верном наборе что-то появится?

@black1385 · 16.07.2025, 15:47

Сообщение от trofey2

а при верном наборе что-то появится?

А при верном наборе запрос отправится на сервер для дальнейшей обработки

Сообщение от trofey2

а что в вашем теге form делает action='#'?

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

Новые блоги и статьи Все статьи Все блоги /
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 221
	16.07.2025, 15:06 [ТС]
	а как сделать чтобы при этой проверке валидности емейла, встроенной в саму форму e-mail, отображалось сообщение если е-мейл адрес не прошел проверку? 0

Как проверить внесенный адрес email?

Решение