如何用JavaScript为指定类名的所有输入字段添加类属性？

你的问题出在JavaScript函数里的return语句——循环只执行一次就直接返回了，后面的输入框根本没机会被检查。下面是修正方案：

修正后的JavaScript函数 #

function checkEmpty() {
    var inputs = document.getElementsByClassName("input");
    var hasError = false;
    for (var i = 0; i < inputs.length; i++) {
        // 用trim()过滤掉输入的空白字符，避免空格被当成有效内容
        if (inputs[i].value.trim().length <= 0) {
            inputs[i].classList.add("error-class");
            hasError = true;
        } else {
            inputs[i].classList.remove("error-class");
        }
    }
    // 有错误则阻止表单提交，否则允许提交
    return !hasError;
}

关键修改说明 #

• 移除了循环内部的return语句，确保所有输入框都能被遍历检查
• 新增hasError变量记录是否存在空输入，最后统一返回结果
• 加入trim()处理输入值，避免用户仅输入空格时被误判为有效内容

额外优化建议 #

• 你的HTML代码里有多余的</label>标签（没有对应的<label>起始标签），建议删除，避免DOM结构错误
• 确认CSS中背景图片的路径../Registration-form/images/icon-error.svg是否正确，要保证相对于CSS文件的路径是有效的

你原来的代码参考 #

原JavaScript函数

function checkEmpty()
{
    var input = document.getElementsByClassName("input");
    for (var i = 0; i < input.length; i++ )
    {
        if (input[i].value.length <= 0)
        {
            input[i].classList.add("error-class");
            return false;
        }
        else
        {
            input[i].classList.remove("error-class");
            return true;
        }
    }
}

原HTML表单

<div id="form-div">
    <form action="#" method="POST" onsubmit="return checkEmpty()">
          <input type="text" class="input" placeholder="First Name"/> </label>
          <input type="password" class="input" placeholder="Password"/> </label><br>
          <input type="submit" class="button" id="button" value="CLAIM YOUR FREE TRIAL"/><br>
     </form>
  </div>

原CSS样式

.error-class
{
    background-image: url("../Registration-form/images/icon-error.svg");
    background-repeat: no-repeat;
}

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