JavaScript中如何获取表单输入的值？

// 通过ID获取输入值
const inputValueById = document.getElementById('inputId').value;

// 通过名称获取输入值
const inputValueByName = document.querySelector('input[name="inputName"]').value;

// 获取表单所有输入值
const formValues = {};
const formElements = document.forms['formId'].elements;
for (let i = 0; i < formElements.length; i++) {
    if (formElements[i].type !== 'submit') {
        formValues[formElements[i].name] = formElements[i].value;
    }
}

// 获取复选框的值
const checkboxValue = document.getElementById('checkboxId').checked;

// 获取多个复选框的值
const checkboxes = document.querySelectorAll('input[type="checkbox"][name="checkboxName"]');
const checkboxValues = Array.from(checkboxes).filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);

// 获取单选按钮的值
const radioButtons = document.querySelectorAll('input[type="radio"][name="radioName"]');
const selectedRadioButton = Array.from(radioButtons).find(radio => radio.checked);
const radioValue = selectedRadioButton ? selectedRadioButton.value : null;

// 自定义电子邮件验证
function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

const emailInput = document.getElementById('emailInput').value;
if (!validateEmail(emailInput)) {
    alert('请输入有效的电子邮件地址');
}

// 使用事件委托
document.getElementById('myForm').addEventListener('input', function(event) {
    if (event.target.tagName === 'INPUT') {
        console.log('Input changed:', event.target.value);
    }
});

// 实时验证优化
let validationScheduled = false;
document.getElementById('myForm').addEventListener('input', function() {
    if (!validationScheduled) {
        validationScheduled = true;
        requestAnimationFrame(() => {
            validateForm();
            validationScheduled = false;
        });
    }
});

function validateForm() {
    // 这里添加你的验证逻辑
}