使用 Jquery 查找输入的 Foreach答案

【问题标题】：Foreach with Jquery find inputs使用 Jquery 查找输入的 Foreach
【发布时间】：2016-05-06 00:04:32
【问题描述】：

我有这样的代码：

<div class="phoneNumbers">
   <input />
</div>
<div class="phoneNumbers">
    <input />
</div>
<div class="phoneNumbers">
     <input />
</div>

我想做的是在phoneNumbers 的div 中找到inputs，并验证它们是否为空或有空格。

我有这个可以找到它们，但我不知道如何做一个 foreach 来验证它们是空的还是有空格。

$('.phoneNumbers').find('input')

有人可以帮忙吗？提前致谢！！

【问题讨论】：

api.jquery.com/each
使用 HTML5 required 和 pattern 属性以及 JS 验证。 <input type="number" pattern="\d{10}" />.
@Tushar 为什么要用required 属性强制输入？
@Pogrindis 这取决于要求。由于现在还不清楚，只是添加以供参考。如果 OP 有兴趣使所有字段都成为必填项。或者，第一个 required 和其他可选。

标签： jquery html validation input

【解决方案1】：

你可以这样做：

$('.phoneNumbers').find('input').css("border", function(){
   return  this.value.trim() === "" ? "red" : "green";
});

【讨论】：

【解决方案2】：

这将检查所有输入并为每个空或只有空格

的输入显示无效消息

$('#a').click(function() {
  $('.error').remove();
  $('.phoneNumbers input').each(function(i, v) {
    if ($(this).val().trim() == '') {
      $(this).parent().append('<span class="error">invalid!</span>');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="phoneNumbers">
  <input />
</div>
<div class="phoneNumbers">
  <input />
</div>
<div class="phoneNumbers">
  <input />
</div>
<button id="a">Validate</button>

【讨论】：

也许我很挑剔，但 OP 从未说过他想让空输入无效..
如果我一直按“验证”按钮，它总是会添加另一个无效的，如果我写一些文本它仍然无效，我可以以某种方式删除它吗？如果可以的话就完美了
@user5852553 这只是一个用于演示的通知区域
调整了验证信息
@TomB。完美:) 谢谢！

【解决方案3】：

您可以使用.filter 来减少结果集。

如果你想一次对单个项目做一些复杂的事情，只使用.each，如果你想找到它们，那么使用.filter

$('.phoneNumbers')
  .find('input')
  .filter(function() {
    return $(this).val() == "";
});

小提琴：https://jsfiddle.net/5jseuc77/

【讨论】：

【解决方案4】：

$('.phoneNumbers').find('input').each(function(index){
    if($(this).val() == ""){
        // insert your code
        console.log("Empty input "+index);
    }
});

但是要求一个值的最好方法是使用“必需”的 HTML 属性

【讨论】：

【解决方案5】：

如果你想检查这些输入需要这样的东西：

var pattern = /([^\s])/g,
    input   = $(this).find('input');

for (var i = 0; i < input.length; i++) {
  if($(input[i]).val().match(pattern)){
    /* DO SOMETHING */
  } else {
    /* EMPTY INPUT */
  }
}

测试：https://jsfiddle.net/o0g22484/1

PD：原谅我的英语......

【讨论】：