表单新增第二个submit按钮后脚本调用ariaLabel.includes报null错误

错误原因 #

你遇到的报错是因为循环遍历到了没有设置aria-label属性的提交按钮，具体逻辑如下：

1. form.elements会自动收集表单内所有可交互表单控件，你新增第二个提交按钮后，这个集合的长度从3变为4，分别是：下标0的IP输入框、下标1的端口输入框、下标2的Save提交按钮、下标3的Reset提交按钮。
2. 你原有循环的判断条件是i < form.elements.length - 1，新增按钮后这个条件等价于i < 3，会遍历到下标2的Save按钮。
3. 两个提交按钮都没有设置aria-label属性，读取元素的ariaLabel属性时会返回null，对null调用includes方法就触发了Cannot read properties of null (reading 'includes')报错。
4. 你打印的是下标0的IP输入框，本身有配置aria-label所以输出正常，错误是在循环到后续元素时触发的。

修复方案 #

你可以选择任意一种方案解决问题：

• 方案一：读取ariaLabel后先做空值兼容，再调用方法

// 读取属性时默认赋值为空字符串，避免null报错
const currentAriaLabel = form.elements[i].ariaLabel || ''
if (currentAriaLabel.includes("Address")) {
    // 原有校验逻辑不变
}

• 方案二：遍历过程中跳过按钮元素，只校验输入框

// 可选链?.也可以直接避免对null调用方法的报错
if (form.elements[i].tagName === 'INPUT' && form.elements[i].ariaLabel?.includes("Address")) {
    // 原有校验逻辑不变
}

• 方案三：直接通过选择器筛选需要校验的IP输入框，不需要遍历所有表单元素，稳定性更高

function ValidateIPaddress(form) {
    // 只选择带有aria-label包含Address的输入框
    const ipInputs = form.querySelectorAll('input[aria-label*="Address"]');
    for (const input of ipInputs) {
        // 原有校验逻辑直接用input变量即可
        if (input.ariaLabel.includes("Network") && input.placeholder != 'DHCP IP' && !input.value.match(ipformat)) {
            alert(`You have entered an invalid ${input.ariaLabel}!`);
            input.focus();
            return false;
        } else if (input.value.length > 0 && !input.value.match(ipformat)) {
            alert(`You have entered an invalid ${input.ariaLabel}!`);
            input.focus();
            return false;
        }
    }
    return true;
}

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