script.js - master - ThaumicNik/lab04

script.js
162 строки6 KB
ThaumicNik
Initial changes
20 май 2025, 09:42
20 май 2025, 09:42407eefe
function getMaxNumber(a, b) {
    if(a > b)
        return a
    return b
}

function createArrayUpTo(num) {
    const result = [num];
    for (let i = 0; i <= num; i++) {
        result[i] = i;
    }
    return result;
}

function filterEvenNumbers(arr) {
    return arr.filter(num => num % 2 === 0);
}

console.log('Наибольшее число:', getMaxNumber(5, 10));
console.log('Массив до числа 5:', createArrayUpTo(5));
console.log('Четные числа из массива:', filterEvenNumbers([1, 2, 3, 4, 5, 6]));

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('employeeForm');
    const saveBtn = document.getElementById('saveBtn');
    const resetBtn = document.getElementById('resetBtn');
    const loadBtn = document.getElementById('loadBtn');
    
    const validators = {
        lastName: (value) => value.trim() !== '',
        firstName: (value) => value.trim() !== '',
        gender: (value) => value !== undefined,
        phone: (value) => /^\+?[\d\s()-]{10,}$/.test(value),
        email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
        position: (value) => value !== '',
        responsibilities: (value) => value.trim() !== ''
    };
    
    const errorMessage = "Поле не заполнено или заполнено некорректно."
    
    const inputs = form.querySelectorAll('input, textarea, select');
    inputs.forEach(input => {
        input.addEventListener('input', function() {
            validateField(this);
        });
        
        // Для radio кнопок добавляем отдельный обработчик
        if (input.type === 'radio') {
            input.addEventListener('change', function() {
                validateField(this);
            });
        }
    });
    
    function validateField(field) {
        const fieldName = field.name;
        const fieldContainer = field.closest('.form-group');
        const errorSpan = fieldContainer.querySelector('.error-message');
        
        let value;
        if (field.type === 'radio') {
            value = form.querySelector(`input[name="${fieldName}"]:checked`)?.value;
        } else {
            value = field.value;
        }
        
        const isValid = validators[fieldName](value);
        
        if (isValid) {
            fieldContainer.classList.remove('error');
            errorSpan.textContent = '';
        } else {
            fieldContainer.classList.add('error');
            errorSpan.textContent = errorMessage;
        }
        
        return isValid;
    }
    
    function validateForm() {
        let isValid = true;
        
        inputs.forEach(input => {
            if (input.type !== 'radio') {
                if (!validateField(input)) {
                    isValid = false;
                }
            }
        });
        
        const genderChecked = form.querySelector('input[name="gender"]:checked');
        if (!genderChecked) {
            const genderContainer = form.querySelector('.radio-group').closest('.form-group');
            genderContainer.classList.add('error');
            genderContainer.querySelector('.error-message').textContent = errorMessage;
            isValid = false;
        } else {
            const genderContainer = form.querySelector('.radio-group').closest('.form-group');
            genderContainer.classList.remove('error');
            genderContainer.querySelector('.error-message').textContent = '';
        }
        
        return isValid;
    }
    
    saveBtn.addEventListener('click', function() {
        if (validateForm()) {
            const formData = {
                lastName: form.lastName.value,
                firstName: form.firstName.value,
                gender: form.querySelector('input[name="gender"]:checked').value,
                phone: form.phone.value,
                email: form.email.value,
                position: form.position.value,
                responsibilities: form.responsibilities.value
            };
            
            localStorage.setItem('formData', JSON.stringify(formData));
            showMessage('Данные успешно сохранены', 'success');
        } else {
            showMessage('Пожалуйста, исправьте ошибки в форме', 'error');
        }
    });
    
    resetBtn.addEventListener('click', function() {
        const errorSpans = form.querySelectorAll('.error-message');
        errorSpans.forEach(span => {
            span.textContent = '';
        });
        const errorContainers = form.querySelectorAll('.form-group.error');
        errorContainers.forEach(container => {
            container.classList.remove('error');
        });
        
        showMessage('Форма очищена', 'info');
    });
    
    loadBtn.addEventListener('click', function() {
        const savedData = localStorage.getItem('formData');
        
        if (savedData) {
            const formData = JSON.parse(savedData);
            
            form.lastName.value = formData.lastName || '';
            form.firstName.value = formData.firstName || '';
            
            if (formData.gender) {
                const genderRadio = form.querySelector(`input[name="gender"][value="${formData.gender}"]`);
                if (genderRadio) genderRadio.checked = true;
            }
            
            form.phone.value = formData.phone || '';
            form.email.value = formData.email || '';
            form.position.value = formData.position || '';
            form.responsibilities.value = formData.responsibilities || '';
            
            inputs.forEach(input => {
                validateField(input);
            });
        }
    });
});