表单验证多IF判断失效：如何同时校验空值与字符长度

你的问题核心是两个校验逻辑为独立赋值操作，第二个校验会直接覆盖第一个的结果，导致只有最后一个校验生效。修改后的代码如下：

const validate = (fieldValues = values) => {
    const temp = { ...errors };
    if ('name' in fieldValues) {
        // 优先检查空值
        if (!fieldValues.name) {
            temp.name = 'Location Name is required.';
        } 
        // 非空时再检查长度
        else if (fieldValues.name.length > 15) {
            temp.name = 'Location Name limited to 15 Characters.';
        } 
        // 校验通过则清空错误
        else {
            temp.name = '';
        }
    }
    setErrors({ ...temp });
    if (fieldValues === values) {
        return Object.values(temp).every(x => x === '');
    }
};

逻辑说明： #

• 先判断输入是否为空，为空时直接设置必填错误，此时不会进入后续长度校验；
• 若输入非空，再检查字符长度是否超过15位，超出则设置长度错误；
• 两项校验都通过时，清空对应错误信息；
• 这种顺序判断的方式避免了错误信息被覆盖，保证两个校验规则都能生效。

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