如何实时检查多个输入的值？答案

【问题标题】：How to check several input's value real time?如何实时检查多个输入的值？
【发布时间】：2021-12-15 20:45:45
【问题描述】：

说明：

我有三个输入：名字、姓氏和年龄。如果用户键入所有输入然后显示validated，并且如果其中一个为空或用户删除其中一个显示invalid，我正在寻找解决方案。

我尝试以下几行：

$('#name' && '#lname' && '#age').keyup(function () {
   $('#display').removeClass('invalides');
   $('#display').replaceWith('Valid');
   $('#display').addClass('validated');
});

.invalides {
  border: 1px solid red;
}
.validated {
  border: 1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" />
<input type="text" id="lname" />
<input type="number" id="age" />

<span id="display" class="invalides">Invalid</span>

你可以在JSFiddle找到它

为什么要使用 keyup？在以下问题中，他们提供了 keyup： Real time updating of values on a form

问题描述：

删除输入值后仍显示validated。
不是实时检查。

【问题讨论】：

标签： javascript

【解决方案1】：

您应该检查input 事件的每个输入值。

const nameEl = $('#name');
const lnameEl = $('#lname');
const ageEl = $('#age');

$('#name, #lname, #age').on('input', () => {
   // if nothing is empty
   if(nameEl.val().length && lnameEl.val().length && ageEl.val().length) {
    $('#display').removeClass('invalides').addClass('validated').html('Valid');
   }
   else $('#display').addClass('invalides').removeClass('validated').html('Invalid');
});

.invalides {
  border: 1px solid red;
}
.validated {
  border: 1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" />
<input type="text" id="lname" />
<input type="number" id="age" />

<span id="display" class="invalides">Invalid</span>

【讨论】：