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

html/lab5/task9/script.js
389 строк13 KB
karpov
finish lab3, lab4
12 мар 2026, 08:19
12 мар 2026, 08:1974cd197
class RegistrationForm {
    constructor() {
        this.initializeElements();
        this.setupEventListeners();
        this.setupValidation();
    }
    
    initializeElements() {
        this.registrationForm = document.getElementById('registrationForm');
        this.loginInput = document.getElementById('login');
        this.passwordInput = document.getElementById('password');
        this.confirmPasswordInput = document.getElementById('confirmPassword');
        this.ageInput = document.getElementById('age');
        this.citySelect = document.getElementById('city');
        this.courierDelivery = document.getElementById('courierDelivery');
        this.addressInput = document.getElementById('address');
        this.addressGroup = document.querySelector('.address-group');
        
        this.loginError = document.getElementById('loginError');
        this.passwordError = document.getElementById('passwordError');
        this.confirmPasswordError = document.getElementById('confirmPasswordError');
        this.ageError = document.getElementById('ageError');
        this.ageHint = document.getElementById('ageHint');
        this.cityError = document.getElementById('cityError');
        this.addressError = document.getElementById('addressError');
        
        this.validationResult = document.getElementById('validationResult');
        
        this.resetBtn = document.getElementById('resetBtn');
    }
    
    setupEventListeners() {
        
        this.registrationForm.addEventListener('submit', (e) => {
            e.preventDefault();
            this.handleFormSubmit();
        });
        
        
        this.resetBtn.addEventListener('click', () => {
            this.resetForm();
        });
        
        
        this.courierDelivery.addEventListener('change', () => {
            this.toggleAddressField();
        });
        
        
        this.loginInput.addEventListener('input', () => {
            this.validateLogin();
        });
        
        this.passwordInput.addEventListener('input', () => {
            this.validatePassword();
            
            if (this.confirmPasswordInput.value) {
                this.validateConfirmPassword();
            }
        });
        
        this.confirmPasswordInput.addEventListener('input', () => {
            this.validateConfirmPassword();
        });
        
        this.ageInput.addEventListener('input', () => {
            this.validateAge();
        });
        
        this.citySelect.addEventListener('change', () => {
            this.validateCity();
        });
        
        this.addressInput.addEventListener('input', () => {
            this.validateAddress();
        });
    }
    
    setupValidation() {
        this.validators = {
            login: this.validateLogin.bind(this),
            password: this.validatePassword.bind(this),
            confirmPassword: this.validateConfirmPassword.bind(this),
            age: this.validateAge.bind(this),
            city: this.validateCity.bind(this),
            address: this.validateAddress.bind(this)
        };
        
        this.fields = {
            login: this.loginInput,
            password: this.passwordInput,
            confirmPassword: this.confirmPasswordInput,
            age: this.ageInput,
            city: this.citySelect,
            address: this.addressInput
        };
    }
    
    toggleAddressField() {
        if (this.courierDelivery.checked) {
            this.addressGroup.classList.remove('hidden');
            this.addressGroup.classList.add('visible');
            this.addressInput.required = true;
        } else {
            this.addressGroup.classList.remove('visible');
            this.addressGroup.classList.add('hidden');
            this.addressInput.required = false;
            this.clearError(this.addressError);
            this.removeValidationClass(this.addressInput);
        }
    }
    
    handleFormSubmit() {
        const validations = [
            this.validateLogin(),
            this.validatePassword(),
            this.validateConfirmPassword(),
            this.validateAge(),
            this.validateCity()
        ];
        
        if (this.courierDelivery.checked) {
            validations.push(this.validateAddress());
        }
        
        const isValid = validations.every(validation => validation);
        
        if (isValid) {
            this.showSuccess();
        } else {
            this.showValidationMessage('Исправьте ошибки в форме', 'error');
        }
    }
    
    validateLogin() {
        const value = this.loginInput.value.trim();
        this.clearError(this.loginError);
        this.removeValidationClass(this.loginInput);
        
        if (!value) {
            this.showError(this.loginError, 'Логин обязателен для заполнения');
            this.addValidationClass(this.loginInput, false);
            return false;
        }
        
        if (value.length < 5) {
            this.showError(this.loginError, 'Логин должен содержать минимум 5 символов');
            this.addValidationClass(this.loginInput, false);
            return false;
        }
        
        if (value.length > 20) {
            this.showError(this.loginError, 'Логин должен содержать максимум 20 символов');
            this.addValidationClass(this.loginInput, false);
            return false;
        }
        
        this.addValidationClass(this.loginInput, true);
        return true;
    }
    
    validatePassword() {
        const value = this.passwordInput.value;
        this.clearError(this.passwordError);
        this.removeValidationClass(this.passwordInput);
        
        if (!value) {
            this.showError(this.passwordError, 'Пароль обязателен для заполнения');
            this.addValidationClass(this.passwordInput, false);
            return false;
        }
        
        if (value.length < 5) {
            this.showError(this.passwordError, 'Пароль должен содержать минимум 5 символов');
            this.addValidationClass(this.passwordInput, false);
            return false;
        }
        
        if (value.length > 12) {
            this.showError(this.passwordError, 'Пароль должен содержать максимум 12 символов');
            this.addValidationClass(this.passwordInput, false);
            return false;
        }
        
        this.addValidationClass(this.passwordInput, true);
        return true;
    }
    
    validateConfirmPassword() {
        const value = this.confirmPasswordInput.value;
        const passwordValue = this.passwordInput.value;
        this.clearError(this.confirmPasswordError);
        this.removeValidationClass(this.confirmPasswordInput);
        
        if (!value) {
            this.showError(this.confirmPasswordError, 'Подтверждение пароля обязательно');
            this.addValidationClass(this.confirmPasswordInput, false);
            return false;
        }
        
        if (value !== passwordValue) {
            this.showError(this.confirmPasswordError, 'Пароли не совпадают');
            this.addValidationClass(this.confirmPasswordInput, false);
            return false;
        }
        
        this.addValidationClass(this.confirmPasswordInput, true);
        return true;
    }
    
    validateAge() {
        const value = this.ageInput.value;
        this.clearError(this.ageError);
        this.clearHint(this.ageHint);
        this.removeValidationClass(this.ageInput);
        
        if (!value) {
            this.showError(this.ageError, 'Возраст обязателен для заполнения');
            this.addValidationClass(this.ageInput, false);
            return false;
        }
        
        const age = parseInt(value);
        
        if (isNaN(age)) {
            this.showError(this.ageError, 'Введите корректный возраст');
            this.addValidationClass(this.ageInput, false);
            return false;
        }
        
        if (age < 14) {
            this.showError(this.ageError, 'Возраст слишком мал');
            this.addValidationClass(this.ageInput, false);
            return false;
        }
        
        if (age > 120) {
            this.showError(this.ageError, 'Возраст слишком велик');
            this.addValidationClass(this.ageInput, false);
            return false;
        }
        
        if (age >= 14 && age <= 18) {
            this.showHint(this.ageHint, 'Требуется согласие родителей');
        }
        
        this.addValidationClass(this.ageInput, true);
        return true;
    }
    
    validateCity() {
        const value = this.citySelect.value;
        this.clearError(this.cityError);
        this.removeValidationClass(this.citySelect);
        
        if (!value) {
            this.showError(this.cityError, 'Выберите город из списка');
            this.addValidationClass(this.citySelect, false);
            return false;
        }
        
        this.addValidationClass(this.citySelect, true);
        return true;
    }
    
    validateAddress() {
        const value = this.addressInput.value.trim();
        this.clearError(this.addressError);
        this.removeValidationClass(this.addressInput);
        
        if (!value) {
            this.showError(this.addressError, 'Адрес обязателен при выборе доставки');
            this.addValidationClass(this.addressInput, false);
            return false;
        }
        
        if (value.length < 10) {
            this.showError(this.addressError, 'Адрес должен содержать минимум 10 символов');
            this.addValidationClass(this.addressInput, false);
            return false;
        }
        
        this.addValidationClass(this.addressInput, true);
        return true;
    }
    
    // Вспомогательные методы
    showError(element, message) {
        element.textContent = message;
        element.classList.add('show');
    }
    
    clearError(element) {
        element.textContent = '';
        element.classList.remove('show');
    }
    
    showHint(element, message) {
        element.textContent = message;
        element.classList.add('show');
    }
    
    clearHint(element) {
        element.textContent = '';
        element.classList.remove('show');
    }
    
    addValidationClass(element, isValid) {
        element.classList.remove('valid', 'invalid');
        element.classList.add(isValid ? 'valid' : 'invalid');
    }
    
    removeValidationClass(element) {
        element.classList.remove('valid', 'invalid');
    }
    
    resetForm() {
        this.registrationForm.reset();
        this.clearAllErrors();
        this.removeAllValidationClasses();
        this.toggleAddressField();
        this.showValidationMessage('Форма очищена', 'info');
    }
    
    clearAllErrors() {
        this.clearError(this.loginError);
        this.clearError(this.passwordError);
        this.clearError(this.confirmPasswordError);
        this.clearError(this.ageError);
        this.clearHint(this.ageHint);
        this.clearError(this.cityError);
        this.clearError(this.addressError);
    }
    
    removeAllValidationClasses() {
        Object.values(this.fields).forEach(field => {
            this.removeValidationClass(field);
        });
    }
    
    showSuccess() {
        const formData = {
            login: this.loginInput.value,
            password: this.passwordInput.value,
            age: this.ageInput.value,
            city: this.citySelect.options[this.citySelect.selectedIndex].text,
            delivery: this.courierDelivery.checked ? 'Да' : 'Нет',
            address: this.courierDelivery.checked ? this.addressInput.value : 'не указан'
        };
        
        const message = `
            ✅ Регистрация успешна!<br>
            <small style="opacity: 0.9;">
                Логин: ${formData.login}<br>
                Пароль: ${'*'.repeat(formData.password.length)}<br>
                Возраст: ${formData.age} лет<br>
                Город: ${formData.city}<br>
                Доставка курьером: ${formData.delivery}<br>
                Адрес: ${formData.address}
            </small>
        `;
        
        this.showValidationMessage(message, 'success');
        
        setTimeout(() => {
            this.resetForm();
        }, 5000);
    }
    
    showValidationMessage(message, type = 'info') {
        this.validationResult.innerHTML = message;
        this.validationResult.className = 'validation-result';
        
        if (type === 'success') {
            this.validationResult.classList.add('success');
        } else if (type === 'error') {
            this.validationResult.classList.add('error');
        }
        
        this.validationResult.scrollIntoView({ 
            behavior: 'smooth', 
            block: 'nearest' 
        });
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new RegistrationForm();
});