页面必填输入框全非空校验逻辑bug修复求助

看起来你遇到的问题是校验逻辑的顺序搞反啦！咱们先分析下你现有代码的问题：

你的forEach循环里，每遇到一个必填且有值的输入框，就直接把inputsCheckState设为true——这就会导致哪怕前面已经有必填框是空的（已经把状态设为false了），后面只要碰到一个填了的框，就又把状态改回true，最终结果自然不符合预期。

正确的修复思路 #

应该先默认所有必填框都已填写，再去排查有没有不符合要求的项：

1. 初始化inputsCheckState = true（默认所有必填框都合规）
2. 遍历输入框时，只要发现任何一个必填且为空的框，就把状态改成false
3. 不需要在遍历里处理“有值就设为true”的逻辑，因为默认状态已经是true，只有不符合的情况才需要修改

修正后的代码（两种写法可选） #

写法一：调整原有逻辑

// 先默认所有必填框都已填写
let inputsCheckState = true;
let message = null; // 沿用你代码中已定义的message变量

inputs.forEach(e => {
    if (e.required && e.value.length === 0) {
        console.log(e.value.length);
        if (message === null) {
            doneMessage('../../../../assets/images/alarm.svg', 'برجاء ملئ جميع الحقول المطلوبه', '', 'حسناً');
        }
        // 只要有一个必填框为空，状态立刻设为false
        inputsCheckState = false;
    }
});

写法二：用Array.every()更简洁直观

这个方法语义性更强，直接检查所有输入框是否都符合“非必填，或必填且有值”的条件：

let message = null;
// 一次性判断所有必填框是否都已填写
const inputsCheckState = inputs.every(e => !e.required || e.value.length !== 0);

// 如果校验不通过，再触发提示
if (!inputsCheckState && message === null) {
    doneMessage('../../../../assets/images/alarm.svg', 'برجاء ملئ جميع الحقول المطلوبه', '', 'حسناً');
}

备注：内容来源于stack exchange，提问作者Abdelrahman Walid