Question

我有这个简单的表格用于我的网站搜索（Wordpress）

<form action="/" method="get">
    <label for="search">Search</label>
    <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
    <input type="image" class="search-btn" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/img/magnifier13.png" width="16" height="16" />
</form>

我不希望人们在搜索字段中输入少于2个字符的情况下搜索任何内容，我该如何进行此操作？最好用JS。

Answer 1

您可以使用HTML5的pattern属性。还需要required属性，否则将从约束验证中排除具有空值的输入字段。

<input pattern=".{2,}"   required title="2 characters minimum">
<input pattern=".{3,10}" required title="3 to 10 characters">

Answer 2

在提交表单之前，您只需调用javascript代码检查文本框的长度。

template <typename T, typename = typename std::is_enum<T>::type>
struct hash_type {
    using type = std::hash<T>;
};

template <typename T>
struct hash_type<T, std::true_type> {
    using type = std::hash<std::underlying_type_t<T>>;  
};

Answer 3

$('#SubmitButtonId').Click(function(){
  var myLength = $("#search").val().length;
  if(myLength < 3)
  {
    //show message
  }
  else
  {
    //submit form
  }
});

Answer 4

如果长度小于定义的金额，您可以使用表单onsubmit事件来阻止提交：

<form action="/" method="get" onsubmit="return (this.s.value.length > 2);">
    <label for="search">Search</label>
    ...

Answer 5

使用JavaScript，您可以检查搜索文本框的长度，看它是否超过2个字符。如果它超过2，那么继续搜索：

  document.getElementsByClassName('test').onClick =function(){
        if(document.getElementById('search').text.length <= 2){
            alert("Needs more than two characters to do search);
        else{
            // commence search
        }
    });

Answer 6

您可以简单地执行以下操作：

<form action="/" method="get">
    <label for="search">Search</label>
    <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
    <input type="image" class="search-btn" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/img/magnifier13.png" width="16" height="16" />

    <input type='button' onclick='checkBeforeSubmit();'>
</form>


// somewhere in your javascript code:

var checkBeforeSubmit = function(){
    var text = $("#search").val();
    if(text.length > 2)
        $(form).submit();
}

除非文本字段超过2个字符，否则不要提交表单

6 个答案: