为什么这个 jQuery 输入值检查器不起作用？答案

【问题标题】：Why does this jQuery input value checker not work?为什么这个 jQuery 输入值检查器不起作用？
【发布时间】：2013-06-27 11:32:24
【问题描述】：

我需要检查所有输入以查看它们是否已填写，在这种情况下，提交按钮将变为可按下并且用户可以安全地提交他们的数据：

unfilled = false;
$('.add-field').keypress(function(){
    $('.add-field').each(function(){
        if($(this).val() === ''){
            unfilled = true;
        } else {
            unfilled = false;
        }
    })
    console.log(unfilled);
});

这段代码有效，但有一个奇怪的转折；当最后一个空输入获得一个字符时，它仍然返回true。如果输入获得另一个字符，则只有这样它才会返回false。我对此感到困惑，因为我知道 .each() 函数是在添加字符并更新输入值后触发的。因此，我不明白为什么它不注册该值。

【问题讨论】：

你为什么觉得需要检查每个add-field 时只更改其中一个？为什么不检查自己呢？其他人也只会检查自己。

标签： javascript jquery validation input

【解决方案1】：

您应该在进入循环之前将unfilled 设置为false（但在keyup 内部）。

在循环中你应该只在字段为空时将unfilled设置为true，并且不要再次将其设置为false，否则你只会知道最后一个字段是否被填写。

【讨论】：

问题中的代码仍然在循环内将unfilled 设置为false
哦，等等，你删除了循环......现在我不再关注了：P
对不起，我正在更新它。我以为我不需要循环。经过进一步调查，我这样做了。这是一个 JSfiddle jsfiddle.net/UzP4s
不幸的是，在进入循环之前将unfilled 设置为false 不起作用。
你应该在循环之前将unfilled设置为false，但在keyup内部！否则unfilled 在第一次运行循环后将始终为真，并且存在缺失值。

【解决方案2】：

您可以使用过滤器并使用 keyup 事件代替 del 键：

DEMO

$('.add-field').keyup(function () {
    var unfilled = !! $('.add-field').filter(function () {
        return $.trim(this.value) === ""
    }).length;
    console.log(unfilled);
});

【讨论】：

【解决方案3】：

这里=== 表示它与数据类型完全匹配：

if($(this).val() === ''){

将其替换为==：

 if($(this).val() == ''){

【讨论】：

【解决方案4】：

据我所知，这是使用 KeyPress 事件时的“问题”，因为浏览器的 UI 线程尚未更新输入字段的值。因此，当前值仍然是“空”，因此返回 true；您可以使用 KeyUp 事件或尝试以下操作：JavaScript keypress event get end value of textarea

【讨论】：