如何用JavaScript ES5检测数组中长度为0的元素并执行操作

核心思路 #

先获取目标输入框集合，转换为可遍历的数组后，逐个检查输入值（去除前后空格后）的长度是否为0，针对空值输入框修改边框样式。

基础实现代码 #

// 获取页面中所有input元素
var inputs = document.getElementsByTagName('input');
// 将HTMLCollection类数组转换为真正的数组（ES5兼容方式）
var inputArray = Array.prototype.slice.call(inputs);

// 遍历每个输入框
inputArray.forEach(function(input) {
    // 去除输入值前后空格后判断长度
    if (input.value.trim().length === 0) {
        // 为空时设置红色边框
        input.style.borderColor = 'red';
    } else {
        // 非空时恢复默认边框样式
        input.style.borderColor = '';
    }
});

关键细节说明 #

• 类数组转数组：getElementsByTagName返回的是HTMLCollection，不属于标准数组，无法直接使用ES5的forEach方法，所以用Array.prototype.slice.call()将其转换为真正的数组。
• trim()方法：ES5原生支持，用于去除输入值前后的空白字符，避免仅输入空格的情况被误判为非空。

结合表单提交场景 #

如果需要在表单提交时做校验，阻止空值提交：

// 获取目标表单
var form = document.getElementById('myForm');

// 绑定表单提交事件
form.addEventListener('submit', function(event) {
    var inputs = Array.prototype.slice.call(form.getElementsByTagName('input'));
    var hasEmptyInput = false;

    inputs.forEach(function(input) {
        if (input.value.trim().length === 0) {
            hasEmptyInput = true;
            input.style.borderColor = 'red';
        } else {
            input.style.borderColor = '';
        }
    });

    // 如果存在空输入框，阻止表单提交
    if (hasEmptyInput) {
        event.preventDefault();
        alert('请填写所有必填字段');
    }
});

仅判断是否存在空元素 #

如果只需要检测是否存在空值输入框，不需要修改样式：

var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));
var hasEmpty = inputs.some(function(input) {
    return input.value.trim().length === 0;
});

// hasEmpty为true则说明存在空输入框
console.log(hasEmpty);

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