多输入框数字校验异常：第二个输入框输入字母无提示如何修复

问题根源 #

原代码存在两个核心问题导致第二个输入框无法触发错误提示：

• 循环使用for...in遍历HTMLCollection，会意外遍历到集合的非元素属性，且循环内第一次迭代就执行return，导致第二个输入框的验证逻辑永远不会被执行。
• 错误提示逻辑仅针对第一个输入框判断，未覆盖所有输入框的状态。

修改后的代码 #

JavaScript代码

function allvalidate() {
    var inp = document.getElementsByClassName('text');
    var hasError = false;
    // 用普通for循环遍历所有输入框
    for (var i = 0; i < inp.length; i++) {
        if (inp[i].type === "text") {
            // 只要有一个输入框不符合要求，标记错误状态
            if (!/^\d{1,}$/.test(inp[i].value)) {
                hasError = true;
                // 找到第一个错误的输入框后可提前终止循环（可选优化）
                break;
            }
        }
    }
    // 根据错误状态统一更新提示信息
    var errorEl = document.getElementById('error');
    if (hasError) {
        errorEl.textContent = "Input Number Only";
        errorEl.style.color = "red";
        return false;
    } else {
        errorEl.textContent = "";
        return true;
    }
}

HTML代码（无需修改）

<p>Number of Customer</p>
<p><input type="text" name="people" class="text" placeholder="no.of people" size="18" maxlength="10" oninput="allvalidate()"></p>
<p>Age</p>
<p><input type="text" name="post" class="text" placeholder="postcode" size="18" maxlength="2" oninput="allvalidate()"></p>
<span id="error"></span>

关键修改点 #

1. 替换遍历方式：用for (var i = 0; i < inp.length; i++)替代for...in，确保只遍历输入框元素，避免无关属性干扰。
2. 延迟返回逻辑：先遍历所有输入框标记错误状态，再统一处理提示，不会中途终止函数，保证所有输入框都能被检查。
3. 明确获取元素：直接通过getElementById获取错误提示元素，避免隐式全局变量的潜在问题。

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