html/lab5/task9/script.js - main - Coderdev/web-static-labs

html/lab5/task9/script.js
141 строка5 KB
Coderdev
26 мар 2026, 23:33
26 мар 2026, 23:336331fa1
"use strict";

const form = document.getElementById("form");
const login = document.getElementById("login");
const pass = document.getElementById("pass");
const pass2 = document.getElementById("pass2");
const age = document.getElementById("age");
const city = document.getElementById("city");
const courier = document.getElementById("courier");
const addrBox = document.getElementById("addrBox");
const addr = document.getElementById("addr");

// Создаем элементы для ошибок
const e_login = document.createElement("div");
e_login.className = "error";
e_login.style.color = "red";
login.insertAdjacentElement("afterend", e_login);

const e_pass = document.createElement("div");
e_pass.className = "error";
e_pass.style.color = "red";
pass.insertAdjacentElement("afterend", e_pass);

const e_pass2 = document.createElement("div");
e_pass2.className = "error";
e_pass2.style.color = "red";
pass2.insertAdjacentElement("afterend", e_pass2);

const e_age = document.createElement("div");
e_age.className = "error";
e_age.style.color = "red";
age.insertAdjacentElement("afterend", e_age);

const e_city = document.createElement("div");
e_city.className = "error";
e_city.style.color = "red";
city.insertAdjacentElement("afterend", e_city);

courier.addEventListener("change", () => {
    addrBox.style.display = courier.checked ? "block" : "none";
});

form.addEventListener("submit", (e) => {
    e.preventDefault();

    let ok = true;

    // Очищаем предыдущие ошибки
    document.querySelectorAll(".error").forEach(el => el.textContent = "");
    
    // Удаляем предыдущее сообщение об успехе, если было
    let oldSuccess = document.getElementById("successMessage");
    if (oldSuccess) oldSuccess.remove();

    // Проверка логина
    if (login.value.length < 5 || login.value.length > 20) {
        e_login.textContent = "Логин должен быть от 5 до 20 символов";
        ok = false;
    }

    // Проверка пароля
    if (pass.value.length < 5 || pass.value.length > 12) {
        e_pass.textContent = "Пароль должен быть от 5 до 12 символов";
        ok = false;
    }

    // Проверка совпадения паролей
    if (pass.value !== pass2.value) {
        e_pass2.textContent = "Пароли не совпадают";
        ok = false;
    }

    // Проверка возраста
    let a = Number(age.value);
    if (a < 14) {
        e_age.textContent = "Возраст слишком мал (минимум 14 лет)";
        ok = false;
    } else if (a > 120) {
        e_age.textContent = "Возраст слишком велик (максимум 120 лет)";
        ok = false;
    } else if (a >= 14 && a <= 18) {
        e_age.textContent = "Требуется согласие родителей";
        // Не отменяем ok, просто предупреждение
    }

    // Проверка города
    if (city.value === "") {
        e_city.textContent = "Выберите город";
        ok = false;
    }

    // Проверка адреса, если выбран курьер
    if (courier.checked) {
        if (addr.value.trim() === "") {
            let e_addr = document.getElementById("e_addr");
            if (!e_addr) {
                e_addr = document.createElement("div");
                e_addr.id = "e_addr";
                e_addr.className = "error";
                e_addr.style.color = "red";
                addrBox.appendChild(e_addr);
            }
            e_addr.textContent = "Введите адрес доставки";
            ok = false;
        }
    }
    
    // Если все проверки пройдены
    if (ok) {
        let successMsg = document.createElement("div");
        successMsg.id = "successMessage";
        successMsg.style.marginTop = "15px";
        successMsg.style.padding = "15px";
        successMsg.style.backgroundColor = "#4CAF50";
        successMsg.style.color = "white";
        successMsg.style.borderRadius = "4px";
        successMsg.style.fontWeight = "bold";
        successMsg.style.textAlign = "center";
        successMsg.style.border = "2px solid #45a049";
        
        let cityText = city.value;
        let deliveryText = courier.checked ? `с доставкой курьером по адресу: ${addr.value}` : "без доставки";
        
        successMsg.innerHTML = `✅ <span style="font-size: 18px;">РЕГИСТРАЦИЯ УСПЕШНА!</span><br><br>
                                Добро пожаловать, <strong>${login.value}</strong>!<br>
                                Ваш город: <strong>${cityText}</strong><br>
                                Доставка: <strong>${deliveryText}</strong>`;
        
        form.appendChild(successMsg);
        
        console.log("✅ Регистрация успешна:", {
            login: login.value,
            age: age.value,
            city: city.value,
            courier: courier.checked,
            address: addr.value
        });
        
        successMsg.scrollIntoView({ behavior: "smooth", block: "nearest" });
    }
});