多个输入的验证 | HTML - jQuery答案

【问题标题】：Validation of multiple inputs | HTML - jQuery多个输入的验证 | HTML - jQuery
【发布时间】：2020-11-05 02:42:12
【问题描述】：

我用 php 循环生成了这个输入

<input type="text" name="input1" id="input1" class="input">
<input type="text" name="input2" id="input2" class="input">
<input type="text" name="input3" id="input3" class="input">
<input type="text" name="input3" id="input4" class="input">

我有这个 jQuery 代码来检查任何输入是否为空

if ( $('#input1').val() !== '' && $('#input2').val() !== '' && $('#input3').val() !== '' && $('#input4').val() !== '') {
    console.log("The inputs are not empty")
}else{
    console.log("One or more inputs are empty")
}

输入是通过循环生成的，因此输入的数量会发生变化，我想要一些这样的代码来进行验证，我尝试了这个但它不起作用

if ( $('.input').val() !== '') {
    console.log("The inputs are not empty")
}else{
    console.log("One or more inputs are empty")
}

我该怎么做？任何帮助将不胜感激。

【问题讨论】：

标签： javascript html jquery loops validation

【解决方案1】：

$('.input') 将返回多个，但$('.input').val() 只能返回一个值，因此它只会返回第一个值。你想要的是循环输入。像这样的：

// set an initial value
var notEmpty = true;

// loop over the inputs and update the value if any are empty
$('.input').each(function () {
  if ($(this).val() === '') {
    notEmpty = false;
  }
});

// check the resulting value
if (notEmpty) {
  console.log("The inputs are not empty")
} else {
  console.log("One or more inputs are empty")
}

【讨论】：

【解决方案2】：

这是因为$('.input') 返回一组元素（如数组）。一种优雅的解决方案是使用filter：

if ( $('.input').filter(function(){ return $(this).val() !== ''}).length > 0) {
    console.log("The inputs are not empty")
}else{
    console.log("One or more inputs are empty")
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="input1" id="input1" class="input">
<input type="text" name="input2" id="input2" class="input">
<input type="text" name="input3" id="input3" class="input">
<input type="text" name="input3" id="input4" class="input">

【讨论】：

【解决方案3】：

这是一个简单的 JavaScript 解决方案：

let isValid = false;
document.querySelectorAll('input').forEach(input => {
      if(input.value !== ''){
        isValid = true;
      }
    });
    
    console.log('is this valid?', isValid);

<input type="text" name="input1" id="input1" class="input">
<input type="text" name="input2" id="input2" class="input">
<input type="text" name="input3" id="input3" class="input">
<input type="text" name="input3" id="input4" class="input">

【讨论】：

【解决方案4】：

您可以使用 javascript 轻松完成，首先将输入以这样的形式放入并添加所需的输入

<form id="new_inputs">
   <input type="text" name="input1" id="input1" class="input" required>
   <input type="text" name="input2" id="input2" class="input" required>
   <input type="text" name="input3" id="input3" class="input" required>
   <input type="text" name="input3" id="input4" class="input" required>
</form>

然后像这样用javascript检查它

var ni=document.forms.new_inputs;

if(ni.checkValidity()){
  console.log("The inputs are not empty");
}
else{
  console.log("One or more inputs are empty")
}

通过这种方式，浏览器会通知用户该元素是必需的并且它是空的

【讨论】：

【解决方案5】：

您可以使用下面的循环或使用过滤器查找等数组方法...

var empty=false;
jQuery.each($('.input'), function( i, val ) {if($(val).val() == '') {empty=true;}});
console.log(!empty ? "The inputs are not empty" : "One or more inputs are empty")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="input1" id="input1" class="input">
<input type="text" name="input2" id="input2" class="input">
<input type="text" name="input3" id="input3" class="input">
<input type="text" name="input3" id="input4" class="input">

或直接在查询中检查值

console.log(jQuery('.input[value=""]').length&gt;0 ? "One or more inputs are empty" :"The inputs are not empty" )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="input1" id="input1" value="" class="input">
<input type="text" name="input2" id="input2" value=""  class="input">
<input type="text" name="input3" id="input3" value=""  class="input">
<input type="text" name="input3" id="input4" value=""  class="input">

【讨论】：