如何验证空白输入搜索框

Posted 2023-05-08

【中文标题】如何验证空白输入搜索框

【英文标题】：how to validate on blank input search box

【发布时间】：2022-01-04 07:12:25

【问题描述】：

如何让搜索输入识别有输入字符串？ 下面的代码有效，但即使没有输入任何输入，如果我单击搜索或输入，它仍然会进行搜索。换句话说，即使搜索输入为空白，它仍然会搜索。这只是一个项目，有人有什么想法吗？

<input type="text" id="textInput" name="" class="query">

   <script>
      let query = document.querySelector('.query');
      let searchBtn = document.querySelector('.searchBtn');

      searchBtn.onclick = function()
          let url = 'https://www.google.com/search?q='+query.value;
          window.open(url,'_self');
      
  </script>  
   <script>
      var input = document.getElementById("textInput");
      input.addEventListener("keyup", function(event) 
          if (event.keyCode === 13) 
              event.preventDefault();
              document.getElementById("searchButton").click();
          
      );
   </script>

【问题讨论】：

您的问题中有标签jquery，但您不使用jQuery。这是一个错误吗？

【参考方案1】：

只需检查（有效）长度，大于零或大于三个字符即可获得任何有意义的结果（取决于您的搜索）。

   <script>
      let query = document.querySelector('.query');
      let searchBtn = document.querySelector('.searchBtn');

      searchBtn.onclick = function()
          if(query.value.trim().length) // maybe length>3 ?
              let url = 'https://www.google.com/search?q='+query.value;
              window.open(url,'_self');
          
      
  </script>  
   <script>
      var input = document.getElementById("textInput");
      input.addEventListener("keyup", function(event) 
          if (event.keyCode === 13) 
              event.preventDefault();
              document.getElementById("searchButton").click();
          
      );
   </script>

【讨论】：

我可以建议query.value.trim().length 避免只输入空格吗？

非常好 - 期待鬼鬼祟祟的人！

谢谢。这对我有帮助。

【参考方案2】：

您必须检查输入的value 是否存在或不是empty。 您还可以检查：

input.value.length input.value !== "" 输入值

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

  searchBtn.onclick = function() 
    let url = 'https://www.google.com/search?q=' + query.value;
    window.open(url, '_self');
  

  var input = document.getElementById("textInput");
  input.addEventListener("keyup", function(event) 
    if (event.keyCode === 13 && input.value) 
      event.preventDefault();
      document.getElementById("searchButton").click();
     
  );

<input type="text" id="textInput" name="" class="query">
<button class="searchBtn">Search</button>

Working Fiddle

【参考方案3】：

如果您将输入包装在 <form></form> 中，则可以使用 html5 的 built in validation。

在我的例子中：

pattern="[\S]+"表示除空格外的所有字符都有效

required 表示输入长度必须至少为 1 个有效字符

另外，我正在根据输入的有效性切换按钮的 disabled 属性。在我看来，它可以提供更好的用户体验，让用户在单击按钮之前知道某些内容不正确。

let button_search = document.querySelector('button.search');
let input_query = document.querySelector('input.query');

button_search.addEventListener('click', function() 
  if (input_query.validity.valid) 
    window.open('https://www.google.com/search?q=' + input_query.value, '_self');
  
);

input_query.addEventListener('keyup', function(event) 
  button_search.disabled = !input_query.validity.valid; //visual indicator input is invalid

  if (event.keyCode === 13) 
    button_search.click();
   
);

<form>
  <input class="query" pattern="[\S]+" required>
  <button class="search" disabled>Search</button>
</form> 

最后一想，除非有特定原因需要在单独的范围内运行代码，否则您可以将所有代码放在一个 <script></script>

【讨论】：

注意到.. 感谢您指出这一点 ""