如何在执行getData函数前校验searchBar为空并弹出提示

云上老周

2026-10-7

解决方案

你需要在回车键触发的逻辑中新增输入非空校验，额外处理用户仅输入空格的场景，即可避免空值触发的接口错误。

修改说明

在searchQuery函数判定按下回车键后，先对搜索框的值做trim()去首尾空格处理
校验处理后的值是否为空：如果为空直接弹出提示，终止函数执行，不会发起后续接口请求

完整修改后代码

const searchbar = document.querySelector('.search-bar');
searchbar.addEventListener('keypress', searchQuery);

function searchQuery(evt) {
  if (evt.keyCode == 13) {
    // 新增非空校验逻辑
    const searchVal = searchbar.value.trim();
    if (!searchVal) {
      alert('请输入搜索内容后再查询');
      // 如果搜索框在表单内，可加下面一行阻止默认表单提交行为
      // evt.preventDefault();
      return;
    }
    getData(searchVal);
  }
}

// Run a fetch requst on api to return the data from searchbox in metric units converting it into json
function getData(query) {
  fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
    .then(weather => {
      return weather.json();
    }).then(displayData);
}