如何对搜索输入框空输入进行校验 避免无内容时触发搜索操作

解决方案 #

只需要在搜索触发逻辑前增加输入内容合法性校验即可，修改后的完整代码如下：

HTML部分

<input type="text" id="textInput" name="" class="query">
<!-- 注意保证搜索按钮的类为searchBtn即可 -->
<button class="searchBtn">搜索</button>

JS部分

let query = document.querySelector('.query');
let searchBtn = document.querySelector('.searchBtn');

searchBtn.onclick = function(){
    // 去除首尾空格后判断是否存在有效输入
    const searchWord = query.value.trim()
    // 无有效内容直接终止搜索流程，可自行添加弹窗提示逻辑
    if(!searchWord) return
    // 对搜索内容编码，避免中文、特殊字符导致URL拼接异常
    let url = 'https://www.google.com/search?q=' + encodeURIComponent(searchWord)
    window.open(url,'_self')
}

var input = document.getElementById("textInput");
input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault()
        // 直接复用已有按钮对象触发点击，避免选择器不匹配报错
        searchBtn.click()
    }
});

核心修改说明 #

• 新增非空校验：通过trim()方法清除输入内容首尾的空格后再判断内容有效性，避免用户仅输入空格也触发搜索的问题
• 统一触发入口：回车事件直接复用已获取的搜索按钮对象触发点击，解决原代码中重复查询DOM、选择器可能不匹配的潜在问题
• 新增关键词编码：使用encodeURIComponent处理搜索内容，避免输入中文、特殊符号时URL格式错误

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