页面加载时执行JS检测表单空字段并修改背景色的问题

看起来你遇到的核心问题是页面加载完成后，JS没有自动执行空字段检测逻辑，导致初始状态下的背景色还是默认的红色，没有根据已填写的字段值更新。下面是具体的解决方案：

问题分析 #

你的当前代码只将检测逻辑绑定在了blur事件上——也就是只有当输入框失去焦点时才会触发检测。但页面加载完成时，输入框已经有初始值，这时候没有触发任何事件，所以检测代码不会运行，背景色自然保持了HTML里设置的默认红色#FF6C60。

解决方案 #

把检测逻辑抽成一个独立的函数，然后在页面加载完成时主动调用一次这个函数，同时保留blur事件的绑定。这样既能在页面初始化时自动检测，也能在用户输入时实时更新。

修改后的JavaScript代码 #

$(document).ready(function(){
  // 把检测逻辑封装成独立函数
  function checkEmptyFields() {
    var text = "field(s) empty";
    var count = $('.user_field').not(function() {
      return this.value.trim(); // 加上trim，避免空格被当成有效内容
    }).length;
    $('#result').html(count + " " + text);
    
    // 根据空字段数量设置背景色
    var centerBox = document.getElementById("centerbox1");
    if (count >= 2) { // 2个及以上空字段：红色
      centerBox.style.backgroundColor = '#FF6C60';
    } else if (count === 1) { // 1个空字段：绿色
      centerBox.style.backgroundColor = '#99C262';
    } else {
      // 所有字段都填满的情况，可自定义颜色，这里默认用绿色
      centerBox.style.backgroundColor = '#99C262';
    }
  }

  // 页面加载完成后立即执行一次检测
  checkEmptyFields();

  // 输入框失去焦点时执行检测
  $('.user_field').blur(checkEmptyFields);
  
  // 额外优化：添加input事件，用户输入时实时更新背景色
  $('.user_field').on('input', checkEmptyFields);
});

关键修改点说明 #

1. 封装独立函数：把原来写在blur事件里的检测逻辑抽出来，方便重复调用，代码也更整洁。
2. 初始化主动调用：在$(document).ready()里直接调用checkEmptyFields()，页面一加载就自动执行检测，修正初始背景色问题。
3. 优化空值判断：在not()里加上trim()，避免用户输入空格被误判为有效内容，检测更准确。
4. 修正条件逻辑：原来的udata > 2不符合你的需求（你需要2个及以上空字段时变红），所以改成count >= 2，完全匹配你的业务规则。
5. 新增实时更新：绑定input事件，让用户在输入过程中就能实时看到背景色变化，不用等到失去焦点，体验更流畅。

测试效果 #

修改后，页面加载时会自动统计空字段数量：

• 当只有1个空字段时，背景色会自动变成绿色#99C262
• 当有2个及以上空字段时，背景色保持红色#FF6C60
• 用户输入或修改内容时，背景色会实时同步更新

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