JQuery表单验证：禁止向garage数组推送空条目

嘿，刚上手jQuery遇到这种小坑太正常啦！你的核心需求就是只有当year、make、model三个字段都填写了有效内容时，才把数据推送到garage数组，对吧？问题出在你当前的代码没有做输入校验，哪怕字段是空的，也会把空字符串塞进去。

我给你整理了一个简单的解决方案，分两步走：

第一步：先处理输入值，再做校验 #

首先，获取输入值的时候记得用trim()去掉前后空格——避免用户只输入空格就被当成有效内容。然后判断三个字段是否都不为空（空字符串在JavaScript里属于"假值"，直接用逻辑与&&就能判断）。

第二步：修改按钮点击事件代码 #

假设你的HTML结构是这样的（如果和你的实际结构不一样，调整选择器就行）：

<input type="text" id="year" placeholder="年份">
<input type="text" id="make" placeholder="品牌">
<input type="text" id="model" placeholder="型号">
<button id="addCarBtn">添加汽车</button>

那修改后的jQuery代码应该是这样的：

// 先定义你的garage数组
let garage = [];

$('#addCarBtn').click(function() {
  // 获取输入值并去除前后空格
  const year = $('#year').val().trim();
  const make = $('#make').val().trim();
  const model = $('#model').val().trim();

  // 校验所有字段是否都有有效内容
  if (year && make && model) {
    // 字段都填好了，推送到数组
    garage.push({ year, make, model });
    // 可选：清空输入框，提升用户体验
    $('#year, #make, #model').val('');
    console.log('汽车已添加：', garage); // 可以在控制台查看数组内容
  } else {
    // 提示用户补全信息
    alert('请填写完整的汽车信息哦！年份、品牌、型号都不能少～');
  }
});

额外优化（可选） #

如果需要更严格的校验，比如年份必须是数字，可以在条件里再加一层判断：

if (year && !isNaN(year) && make && model) {
  // 这里的!isNaN(year)确保年份是有效数字
  garage.push({ year, make, model });
  // ...其他操作
}

这样改完之后，只有当三个字段都填写了非空的有效内容时，才会往garage数组里加数据，空字段的情况会直接触发提示，不会推送空内容啦！

内容的提问来源于stack exchange，提问作者S. Vanderlinden