如何检查输入框是否为空？

Question

我正在制作一个带有输入框的表单，如果输入框为空，则提交按钮将被禁用，但是，如果输入框中的字符数大于0，则提交按钮将启用。

<input type='text' id='spa' onkeyup='check()'><br>
<input type='text' id='eng' onkeyup='check()'><br>
<input type='button' id='submit' disabled>

function check() {
  if($("#spa").lenght>0 && $("#eng").lenght>0) {
    $("#submit").prop('disabled', false);
  } else {
    $("#submit").prop('disabled', true);
  }
}

它可以工作，但是如果我删除例如输入框spa的内容，则提交按钮仍然处于启用状态。

- Kakitori

---

长度不等于"lenght"。 - Aleksandr M

Answer 1

使用 trim 和 val。

var value=$.trim($("#spa").val());

if(value.length>0)
{
 //do some stuffs. 
}

val()：返回输入框中的值。

trim()：去除字符串两端的空格。

- Ravi Gadag

Answer 2

使用.val()，它将返回<input>元素的值

$("#spa").val().length > 0

你打错字了，是length而不是lenght。

- gdoron is supporting Monica

Answer 3

由于 JavaScript 是动态类型的，所以不必像上面那样使用 .length 属性，你可以将输入值视为布尔值：

var input = $.trim($("#spa").val());

if (input) {
    // Do Stuff
}

您还可以将逻辑提取到函数中，然后通过分配类并使用each()方法，如果将来要添加其他输入，则代码更加动态，不需要更改任何代码。

因此，您可以给输入框一个类，例如test，而不是将函数调用硬编码到输入标记中，然后使用：

$(".test").each(function () {
    $(this).keyup(function () {
        $("#submit").prop("disabled", CheckInputs());
    });
});

接下来会调用以下内容，并返回一个布尔值，以分配给disabled属性：

function CheckInputs() {
    var valid = false;
    $(".test").each(function () {
        if (valid) { return valid; }
        valid = !$.trim($(this).val());
    });
    return valid;
}

您可以在这个JSFiddle中看到我所提到的所有内容的工作示例。

- Pete Uh

Answer 4

为什么不使用：

<script>
$('input').keyup(function(){
if(($('#eng').val().length > 0) && ($('#spa').val().length > 0))
    $("#submit").prop('disabled', false);
else
    $("#submit").prop('disabled', true);
});
</script>

然后在输入框中删除onkeyup函数。

- RobinV91nl

---

“$('#eng,#spa')” 而不是 “$('input')”，我会这么说。并确保在 DOMReady 上运行脚本。 - David Hedlund

Answer 5

试试这个

$.trim($("#spa").val()).length > 0

它不会将任何空格视为正确的值。

- K D

Answer 6

如果您在应用程序中使用jquery-validate.js，请使用以下表达式。

if($("#spa").is(":blank"))
{
  //code
}

- YogeshWaran

Answer 7

这段代码将处理多于两个复选框，以防您决定扩展表单。

$("input[type=text]").keyup(function(){
    var count = 0, attr = "disabled", $sub = $("#submit"), $inputs = $("input[type=text]");  
    $inputs.each(function(){
        count += ($.trim($(this).val())) ? 1:0;
    });
    (count >= $inputs.length ) ? $sub.removeAttr(attr):$sub.attr(attr,attr);       
});

示例: http://jsfiddle.net/sr4gq/

此为工作示例，可点击链接查看。

- Kevin Bowersox

---

尽管如此，如果页面有另一个文本输入框，例如搜索字段，这段代码将会出错，因此使用类会更加灵活。使用整数来设置布尔值也没有语法上的意义，因此其他开发人员可能会对您的代码感到困惑。 - Pete Uh

@Pete Uh 我同意，到那时最好采用您建议的基于类的选择器，但我不知道我在哪里使用整数来设置布尔值，您是指使用空字符串的falsey特性吗？ - Kevin Bowersox

抱歉如果我表达不够清晰，我指的是使用计数器来检查具有值的输入数量，然后将该整数与所有输入的计数进行比较。如果您看到我的示例，我使用布尔值来设置“disabled”属性，我认为这更符合语法规范。 - Pete Uh