在JavaScript中如何将表单提交数据封装为contact对象

先修正原有代码的潜在问题 #

• 你当前的error变量没有声明，属于隐式全局变量，会导致校验逻辑混乱
• 现有校验只在单个字段修改时触发，提交时仅判断最后一次修改的字段是否合法，无法保证所有字段都符合要求，建议提交时全量校验所有字段
• 提交事件建议绑定在表单的submit事件上，不要绑定按钮的click事件，避免用户按回车提交时逻辑不触发

方案1：手动赋值（新手友好，逻辑清晰） #

直接在全量校验通过后，把每个输入框的值赋值给contact对应的属性即可，修改后的完整JS代码如下：

let formContact = document.querySelector('#formContact');
let inputFirstname = document.querySelector('#firstName');
let inputLastname = document.querySelector('#lastName');
let inputEmail = document.querySelector('#email');
let inputAddress = document.querySelector('#address');
let inputCity = document.querySelector('#city');

const regexName = /^[a-zA-Z-\s]+$/;
const regexMail = new RegExp('^[a-zA-Z0-9.-_]+[@]{1}[a-zA-Z0-9.-_]+[.]{1}[a-z]{2,10}$');
const regexAdress = /^(([a-zA-ZÀ-ÿ0-9]+[\s\-]{1}[a-zA-ZÀ-ÿ0-9]+)){1,20}$/;
const borderCode = " #7EEA5E solid 2px";

// 单字段校验逻辑复用
function validateField(field) {
    let error = false;
    switch(field.id) {
        case 'firstName':
        case 'lastName':
        case 'city':
            error = !regexName.test(field.value.trim());
            break;
        case 'email':
            error = !regexMail.test(field.value.trim());
            break;
        case 'address':
            error = !regexAdress.test(field.value.trim());
            break;
    }
    if(!error) field.style.border = borderCode;
    return error;
}

// 单字段修改时校验
formContact.addEventListener('change', function (e) {
    e.preventDefault();
    validateField(e.target);
});

// 表单提交事件
formContact.addEventListener('submit', function (e) {
    e.preventDefault();
    // 全量校验所有字段
    const hasError = [inputFirstname, inputLastname, inputEmail, inputAddress, inputCity].some(field => validateField(field));
    if(hasError) {
        alert('请检查所有输入项是否符合要求');
        return;
    }
    // 给contact对象赋值
    const contact = {
        firstName: inputFirstname.value.trim(),
        lastName: inputLastname.value.trim(),
        email: inputEmail.value.trim(),
        address: inputAddress.value.trim(),
        city: inputCity.value.trim(),
    };
    // 后续发送JSON请求直接调用JSON.stringify(contact)即可
    console.log('收集到的contact对象：', contact);
    console.log('转JSON后的结果：', JSON.stringify(contact));
    // 此处补充你的提交请求逻辑
});

方案2：用FormData自动收集（适合字段多的场景，代码更简洁） #

因为你表单input的name属性和contact对象的属性名完全一致，可以直接用FormData批量收集数据，赋值部分代码可以简化为：

// 全量校验通过后执行
const formData = new FormData(formContact);
const contact = Object.fromEntries(formData);
// 对每个值做去空格处理
Object.keys(contact).forEach(key => contact[key] = contact[key].trim());

这种方案不用手动逐个写赋值语句，后续如果加字段只要保持input的name和contact属性名一致即可，维护成本更低。

内容的提问来源于stack exchange，提问作者ZeyennaStudy