JS表单校验函数controllaFormStanza单选框选中仍报错问题排查

问题根因 #

核心错误出现在单选框组immagine的校验逻辑中：for循环遍历所有单选框时没有提前终止判断，后续未选中的单选框会覆盖前面的选中判定结果。比如你选中了第一个单选框，循环到第二个未选中的单选框时，会把ok重新赋值为false，同时写入错误提示，最终导致就算有选中项也会触发报错。

具体代码错误点 #

• 单选框校验的for循环逻辑错误：只要遍历到未选中的单选框，就直接把ok设为false并赋值错误提示，完全覆盖了之前遍历到选中项的正确结果
• 错误提示的写入时机不对：不管有没有选中项，只要遇到未选中的单选框就会写错误提示，而不是遍历完所有单选框确认无选中项时才写入
• 校验逻辑冗余：ok = ok && false可以直接简化为ok = false，不影响功能但可读性更强

修复后代码示例 #

function controllaFormStanza(){
    var stanza = document.myForm.stanza.value;
    var ok = true;
  
    // 校验房间名称非空
    if (stanza.length == 0){
        document.getElementById("noNomeStanza").innerHTML="Dai un nome alla tua stanza!";
        ok = false;
    } else {
        document.getElementById("noNomeStanza").innerHTML="";
    }

    // 修正后的单选框校验逻辑
    var hasCheckedRadio = false;
    for(i=0;i< document.myForm.immagine.length; i++) {
        if(document.myForm.immagine[i].checked) {
            hasCheckedRadio = true;
            break; // 找到选中项直接跳出循环，无需继续遍历
        }
    }
    // 遍历结束后统一判断校验结果
    if(!hasCheckedRadio) {
        document.getElementById("noImmagine").innerHTML="Seleziona una icona per la tua stanza!";
        ok = false;
    } else {
        document.getElementById("noImmagine").innerHTML="";
    }
  
    if (ok){
        document.myForm.submit();
        return true;
    } else {
        return false;
    }
}

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