表单可选字段赋值难题：空字段如何赋值为false而非报错？

报错的原因是当表单的可选字段不存在时，e.target.fieldName会返回undefined，直接读取.value就会触发类型错误。下面是几种简洁的解决方式：

1. 使用可选链+空值合并（推荐） #

用可选链操作符?.安全访问字段的value，再用空值合并运算符??指定默认值false：

async function submit(e) {
    // 注意：拼写修正 adress → address，避免因字段名错误导致找不到元素
    const name = e.target.name?.value ?? false;
    const address = e.target.address?.value ?? false;
    const comment = e.target.comment?.value ?? false;
}

• ?.：如果e.target.name是undefined/null，会直接返回undefined，不会继续访问.value
• ??：仅当左侧值为undefined/null时，才返回右侧的false（如果需要把空字符串""也转为false，可以替换成||）

2. 封装工具函数减少重复代码 #

如果表单字段较多，写一个工具函数统一处理：

function getFormFieldValue(form, fieldName, defaultValue = false) {
    const field = form[fieldName];
    return field ? (field.value || defaultValue) : defaultValue;
}

async function submit(e) {
    const form = e.target;
    const name = getFormFieldValue(form, 'name');
    const address = getFormFieldValue(form, 'address');
    const comment = getFormFieldValue(form, 'comment');
}

额外注意 #

检查表单字段的name属性拼写是否正确（比如你代码里的adress应该是address），拼写错误也会导致e.target.fieldName返回undefined，触发相同的报错。

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