Question

我有一个像这样的Javascript函数：

function validateInput() {
    var search_text = document.getElementById('search_text').value;
    var size = document.getElementById('size').value;
    var submitButton = document.getElementById('sb_search');

    submitButton.removeAttribute('disabled');
    var filter = /^[\x20-\x7E]+$/;

    if (filter.test(search_text) && filter.test(size)) {
        return true;
    } else {
        submitButton.setAttribute('disabled', 'disabled');
    }
}

如果输入字段search_text和size满足正则表达式，则应该允许提交表单。但即使我输入了正确的值，它也不允许我提交表格。如果我只使用这样的条件，它就有效：

if (filter.test(search_text)){
    return true;
}

我希望两个输入字段都满足正则表达式。我错过了什么？

修改 HTML

<form action="/search/" id="ui_element" class="sb_wrapper">{% csrf_token %}
    <!-- <p> <span class="sb_down"></span> -->
    <input class="sb_input" type="text" id="search_text" name="search_text" placeholder="Search by Name ...">
    <input class="sb_search" id="sb_search" type="submit" value="Go" onclick="validateInput()">
    </p>
    <ul class="sb_dropdown" style="display:none;">
        <li class="sb_filter">Filter your search</li>
        <li>
            <select id="selectmode" name="selectmode" class="filter">
                <option value="filter">Filter</option>
                <option value="date">By date</option>
                <option value="size">By size</option>
            </select>
        </li>
        <li class="bydateinputs" style="display: none">
            <label>Date:</label>
            <input type="text" id="date_picker" style="width:100px;" name="date" class="text_search" />
        </li>
        <li class="bysizeinputs" style="display: none">
            <label>Size:</label>
            <input type="text" id="size" style="width:100px;" name="size" placeholder="eg: 4 MB" class="text_search" />
        </li>
    </ul>
</form>

Answer 1

我认为您的HTML语法可能缺少某些结束标记或打开标记。我试图纠正它们

<form action="/search/" id="ui_element" class="sb_wrapper">
         {% csrf_token %}
  <p>  <-- missing opening p tag
   <input class="sb_input" type="text" id="search_text" name="search_text" placeholder="Search by Name ...">
    <input class="sb_search" id="sb_search" type="submit" value="Go" onclick="validateInput()" >

  </p>
  <ul class="sb_dropdown" style="display:none;">
    <li class="sb_filter">Filter your search</li>
    <li>
     <select id="selectmode" name="selectmode" class="filter">
      <option value="filter">Filter</option>
      <option value="date">By date</option>
      <option value="size">By size</option>
     </select>
    </li>
    <li class="bydateinputs" style="display: none">
     <label> Date:</label>
     <input type="text" id="date_picker" style="width:100px;" name="date" class="text_search" />
    </li>
    <li class="bysizeinputs"  style="display: none">
      <label> Size:</label>
      <input type="text" id="size" style="width:100px;" name="size" placeholder="eg: 4 MB" class="text_search" />
   </li>
  </ul>

Answer 2

您可能遇到的问题是提交按钮仍处于禁用状态。单击它时将其禁用，如果之后用户编辑其输入现在无法提交，因为该按钮仍处于禁用状态。

当按钮被禁用时，它不会生成点击事件，因此代码不会再次运行。

标识为size的元素没有值（实际上，它甚至不可见，至少最初没有，因为它位于样式为display: none的元素内），并且你的正则表达式没有t允许空字符串。

将正则表达式从/^[\x20-\x7E]+$/更改为/^[\x20-\x7E]*$/，以便它允许空字符串。

顺便说一句：我怀疑你打算用一些你没有向我们展示的javascript来显示那个元素。

Answer 3

将其称为..

onclick="return validateInput();"

除此之外，你也不需要在JS中编写else子句..

你的JS可能是

function validateInput() {
    var search_text = document.getElementById('search_text').value;
    var size = document.getElementById('size').value;
    var submitButton = document.getElementById('sb_search');


    var filter = /^[\x20-\x7E]+$/;

    if (filter.test(search_text) && filter.test(size)) {
        submitButton.removeAttribute('disabled');
        return true;
    }
    return false;

}

这个Javascript条件出了什么问题？

3 个答案: