如何在JavaScript中检查我的任何文本框是否为空

Question

可能是重复问题:
使用jQuery检查输入是否为空

我有一个表单和文本框，当表单按钮被点击时，如何使用JavaScript if else语句确定这些文本框中是否有任何一个为空。

function checking() {
    var textBox = $('input:text').value;
    if (textBox == "") {
        $("#error").show('slow');
    }
}

感谢您的提前支持！

- ray

---

https://dev59.com/JHI-5IYBdhLWcg3wcn3m - jeremy

Answer 1

使用jQuery选择器选择元素时，您将得到一个jQuery对象，应该使用val()方法来获取/设置输入元素的值。

还要注意，:text选择器已被弃用，最好通过修剪文本来移除空格字符。您可以使用$.trim实用函数。

function checking() {
    var textBox =  $.trim( $('input[type=text]').val() )
    if (textBox == "") {
        $("#error").show('slow');
    }
}

如果您想使用value属性，您应该首先将jQuery对象转换为原始DOM对象。您可以使用[index]或get方法。

 var textBox = $('input[type=text]')[0].value;

如果您有多个输入，应该通过循环处理它们。

function checking() {
    var empty = 0;
    $('input[type=text]').each(function(){
       if (this.value == "") {
           empty++;
           $("#error").show('slow');
       } 
    })
   alert(empty + ' empty input(s)')
}

- Ram

---

嗨！这个也没起作用。我有6个文本框，其中两个文本框确实有值，这会影响条件吗？我的目标是一旦用户点击提交按钮并且任何一个剩余的文本框为空，就会显示错误警告。谢谢。 - ray

你好！不好意思，我觉得我不需要循环。实际上我有一个长的解决方案 -->function checking() { if(document.getElementById("entry_0").value == "") { $("#error").show('slow'); } if(document.getElementById("entry_1").value == "") { $("#error").show('slow'); } }想象一下，如果我有20个文本框。这就是为什么我试图调用输入：文本对象本身或“表单输入”以调用所有文本框在一个函数中。谢谢！ - ray

嗨@undefined！非常感谢！它确实起作用了，我尝试了你的更新！非常感谢！ - ray

Answer 2

在使用jquery对象时，不能使用value属性，而应该使用val()函数。但是这个函数只会检查选择器返回的第一个文本框。

Live Demo

function checking() {    
  var textBox = $('input:text').val();
  if (textBox == "") {
      $("#error").show('slow');
   }
}

你可以附加模糊事件并在每个文本框失去焦点时进行此验证。 实时演示

$('input:text').blur(function() {    
    var textBox = $('input:text').val();
    if (textBox == "") {
        $("#error").show('slow');
    }
});

根据与OP的讨论，提交按钮点击时的验证。

实际演示

$('#btnSubmit').click(function() { 
     $("#error").hide();    
     $('input:text').each(function(){
       if( $(this).val().length == 0)
          $("#error").show('slow');
    });
});

- Adil

---

谢谢您的及时回复，实际上我也尝试过了，但是没有效果。我有6个文本框，其中两个文本框确实有值，这会影响条件吗？我的目标是一旦用户点击提交按钮并且任何一个剩余的文本框为空，就会显示错误警告。 - ray

更新我的答案，希望它能帮助你实现你想要的功能。 - Adil

@Adil 这是一个非常优秀且信息量很大的回答。+1。 - tcode

Answer 3

尝试这段代码：

var textBox = $('input:text').val();

if (textBox==""){ 
  $("#error").show('slow'); 
} 

- Alessandro Minoccheri