仅当所有输入验证通过时关闭搜索Overlay的实现问题排查

问题原因 #

你的问题是脚本逻辑错误导致的：当前按钮点击事件会逐个遍历输入框，每判断一个就立即执行Overlay的显示/隐藏操作。当最后一个输入框验证通过时，会执行$('#search').removeClass('open')，直接覆盖了前面输入框验证失败时添加的open类，所以哪怕前两个输入无效，Overlay还是会被关闭。

修复方案 #

我们需要先统一检查所有输入是否都符合要求，再决定是否关闭Overlay，同时把验证逻辑抽成可复用函数，避免重复代码：

修复后的完整JS代码 #

$(function() {
  $('a[href="#search"]').on("click", function(event) {
    event.preventDefault();
    $("#search").addClass("open");
    $('#search > form > input[type="search"]').focus();
  });

  $("#search, #search button.close").on("click keyup", function(event) {
    if (
      event.target == this ||
      event.target.className == "close" ||
      event.keyCode == 27
    ) {
      $(this).removeClass("open");
    }
  });

  $(".send_btn").submit(function(event) {
    event.preventDefault();
    return false;
  });
});

// 统一验证函数：判断单个输入是否符合要求
function isValidInput(input) {
  const value = input.value.trim();
  // 验证规则：2位数字，数值范围1-20
  return value.length === 2 && !isNaN(value) && parseInt(value) >= 1 && parseInt(value) <= 20;
}

// 输入框change事件验证
function handleChange(input) {
  if (isValidInput(input)) {
    input.style.borderColor = '';
  } else {
    input.style.borderColor = 'red';
    if (input.value < 0) input.value = "";
  }
}

// 限制输入仅为数字
$('input').keypress(function(event) {
  event = event || window.event;
  var charCode = event.which || event.keyCode;
  var charStr = String.fromCharCode(charCode);
  if (event.key !== undefined && event.charCode === 0) {
    return;
  }
  // 只允许数字输入
  if (!/^[0-9]$/.test(charStr)) {
    event.preventDefault();
  }
});

// 按钮点击事件：统一检查所有输入
$('.send_btn').click(function() {
  let allValid = true;
  // 先遍历所有输入，标记错误样式
  $("input.each_item").each(function() {
    if (!isValidInput(this)) {
      $(this).css('border-color', 'red');
      allValid = false;
    } else {
      $(this).css('border-color', '');
    }
  });

  // 根据整体验证结果操作Overlay
  if (allValid) {
    $('#search').removeClass('open');
    $('html').removeClass("noScrollSimple");
  } else {
    $('#search').addClass('open');
    $('html').addClass("noScrollSimple");
  }
});

关键修改点 #

• 新增isValidInput函数，统一验证规则，避免重复代码
• 按钮点击事件改为先遍历所有输入，判断是否全部有效，再执行统一的Overlay操作，不再逐个输入单独修改Overlay状态
• 简化数字输入限制的正则表达式，合并重复判断逻辑
• 优化handleChange函数，直接复用统一的验证逻辑

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