检查是否所有输入都为空(没有值)

Check if all inputs are empty (have no value)

本文关键字:是否 输入 检查      更新时间:2024-03-17

我只是想快速拼凑一些东西,检查我的表单中的任何输入是否为空。
我正在尝试这个:

var isEmpty = true;
$('input').each(function(){
    if($(this).val() === ""){
        isEmpty = false;
    }
});
alert(isEmpty);

但它一直在提醒真实
如果我这样做:

$('input').each(function(){
    alert($(this).val();
});

它会提醒我拥有的每个输入字段...
如果我有一个空输入,为什么它不返回 false?

这里有

一个小片段来检查所有文本inputs都是空的:

var isEmpty = $("input[type='text']").filter(function () {
    return this.value.trim();
}).length === 0;
console.log( isEmpty );   // boolean true/false

jsbin游乐场

PS:对于checkboxradio游戏更简单:

var isUnchecked      = $("input[type='checkbox']:checked").length === 0;
var isRadioUnchecked = $("input[type='radio']:checked").length === 0;

奖励::blank自定义选择器(适用于任何元素(

jQuery.extend(jQuery.expr[':'], {
  blank: function(e,i,m) {
    if(/input|textarea/i.test(e.tagName)) {
      if(/checkbox|radio/i.test(e.type)){
        return !e.checked;
      }else{
        return !e.value.length;
      }
    }else{
      return !e.innerHTML.trim();
    }
  }
});
$("div:blank").css({outline:"2px solid red"});
$("input:blank").css({outline:"2px solid red"});
$("textarea:blank").css({outline:"2px solid red"});
   
$("div:not(:blank)").css({outline:"2px solid green"}); // how cool is that? Using :not
*{margin:5px;padding:2px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div>Example using :not(:blank) selectors</div>
  
<input type="text" value="abc">
<input type="text" value="">
  
<input type="checkbox">
<input type="checkbox" checked>
  
<input type="radio" checked>
<input type="radio">
  
<textarea></textarea>
<textarea>abc</textarea>

<div><p> 等标准元素上,:blank的行为与 jQuery 的:empty选择器不同,因为请注意空格和换行符:

 <p>
 </p>

并查看结果:

$("p:blank").length // 1 (found one blank paragraph)
$("p:empty").length // 0 there's no empty paragraph (since the newlines/spaces)

回到你的问题:)

由于您正在循环所有元素,因此目前您仅将 isEmpty 的值设置为循环中的最后一个元素 - value。
您可以将布尔标志断言到if中,例如:

var isEmpty = false; // start with a falsy presumption
$('input').each(function(){
    // as long as `isEmpty` is `false`
    if(isEmpty===false && $.trim( this.value ) === "") {
        isEmpty = true;
    }
});

此外,检查空虚=== ""更有意义,返回true

否则,反之亦然,就是颠倒你的否定

var isEmpty = true; // start with a truthy presumption
$('input').each(function(){
    if(isEmpty && $.trim( this.value )){
        isEmpty = false;
    }
});

下面是一个活生生的例子:

var isEmpty = true; // start with a truthy presumption
$('input').each(function(){
    if(isEmpty && $.trim( this.value )){
        isEmpty = false;
    }
});
alert(isEmpty); // false
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="">
<input type="text" value="something">
<input type="text" value="">

alert在循环之外,所以它只会提醒最终值。希望下面的代码有用

.HTML

<input type="text" id=" " value="rdrdr"/>
<input type="text" id=" " value=" "/>
<input type="text" id=" " value="xdxd"/>
<input type="text" id=" " value=" "/>

.JS

$('input').each(function(){
    var isEmpty = true;
    if($.trim($(this).val()) == ""){
        isEmpty = false;
    }
    console.log(isEmpty)
});

Chexk在这里演示

在代码中,您要检查:

if($(this) === "")

$(this)是一个 jQuery 对象,它永远不会与空字符串相同。也许你打算写这个?

if ($(this).val() === "")

您需要检查每个输入的 val((,因此请记住获取要比较的值:

if ( $(this).val() === "" )

尝试先初始化变量,不包含任何值。然后在某个范围时放置一个值并调用它。

var isEmpty;
    $('input').each(function(){
      if($(this) === ""){
        var isEmpty = false;
        return isEmpty;
        alert(isEmpty);
      } else {
        var isEmpty = true;
        return isEmpty;
        alert(isEmpty);
      }
    });