JavaScript中如何替换重写报错的document.forms[0].all写法

document.forms[0].all是旧版IE独有的非标准DOM属性，未纳入W3C规范，Chrome、Firefox、Edge、Safari等所有现代浏览器都未实现该属性，调用时直接返回undefined，后续读取length执行遍历的逻辑会直接报错，导致校验流程中断。

使用表单标准属性elements获取表单内所有控件集合，该属性属于DOM Level 1标准，全浏览器兼容，返回的集合恰好包含input、select、textarea等所有需要校验的表单控件，比非标准的all属性更适配当前校验场景。

同时修复原代码存在的3处语法问题：

• 循环变量i未做声明，会泄漏到全局作用域
• 多选/下拉选项数判断分支的大括号错位，导致下拉空值校验逻辑被排除在条件判断外
• 定义了从未使用的requiredFields冗余变量，可直接删除

修正后的完整代码如下：

function SubmitTheForm(button) {
    var selectBox;
    var i;
    PleaseWait();
    // 替换非标准all属性为标准elements属性
    var AllObjects = document.forms[0].elements;
    for (i = 0; i < AllObjects.length; i++) {
        if (AllObjects[i].className === 'Mandatory') {
            if (AllObjects[i].type === "text" && AllObjects[i].value.trim() === '') {
                return false;
            }
            else if (
                (AllObjects[i].type === "select-multiple" || AllObjects[i].type === "select-one") 
                && AllObjects[i].style.display !== 'none' 
                && AllObjects[i].options.length === 0
            ) {
                return false;
            }
            else if (AllObjects[i].type === "select-one" && AllObjects[i].value === "") {                 
                return false;
            }
        }
    }
    // 校验通过后可在此处补充表单提交逻辑
    return true;
}

function PleaseWait() {
    displayAnimationIn($("body"), "", "loading-80.gif");
}

补充说明：如果业务场景确实需要获取表单标签下所有类型的后代元素（而非仅表单控件），可将获取元素集合的语句替换为var AllObjects = document.forms[0].getElementsByTagName('*')，但当前校验逻辑仅针对表单控件，使用elements性能更好、匹配更精准。

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