Question

我有这样的代码：

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

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

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

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

有人可以帮忙吗？在此先感谢!!

Answer 1

您可以这样做：

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

Answer 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>

Answer 3

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

如果您想一次对单个项目执行复杂操作，请仅使用.each，如果您要查找它们，请使用.filter

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

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

Answer 4

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

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

Answer 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：请原谅我的英文......

使用Jquery的Foreach查找输入

5 个答案: