javascript - 循环遍历 jQuery 对象并评估条件

标签 javascript jquery

我在下面创建了一个非常简单的脚本,其中我提出了一个我似乎在 .each() documentation 中找不到的问题。 。如您所见,我想循环遍历 jQuery 对象的集合并返回 truefalse (如果其中一个为 false,则 .each 循环将中断,因此最终结果是假的)

由于某种原因,验证似乎无法正常工作。

 $('.with-validation').on('submit', function (e) {
   if (isValid()) {
     console.log('validation succeded');
     return true;
   } else {
     console.log('validation failed');
     return false;
   }
 });
    
function isValid () {
  var $required = $('.required');
  var $emails = $('.email');
  var inputsValidation = function () {
    return $(this).val().length > 0;
  }
  $required.each(inputsValidation);
  return inputsValidation;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <form class="with-validation">
        <input name="lastname" class="required" type="text"></input>
        <input name="firstname" type="text"></input>
        <input name="phone" class="required" type="text"></input>
        <input name="email" class="required email" type="text"></input>
        <input name="confEmail" class="required email" type="text"></input>
        <button class="submit-btn" type="submit">OK</button>
    </form>
</body>

最佳答案

您可以使用Array.prototype.every如果您的函数正在寻找有效条件。或者使用Array.prototype.some具有检查无效条件的函数。 (如果您支持< IE9,请使用polyfill)

使用.toArrayjQuery 集合转换为数组。

您正在比较两个函数本身 inputsValidation && emailsValidation 而不是结果,而且 $each 也不会以这种方式返回结果。将结果获取到某些变量并比较结果,而不是函数本身。

$('.with-validation').on('submit', function (e) {
   if (isValid()) {
     console.log('validation succeded');
     return true;
   } else {
     console.log('validation failed');
     return false;
   }
 });
    
function isValid () {
  var $required = $('.required').toArray();
  var $emails = $('.email').toArray();
  var emailsValidation = function (i) {
    return validateEmail(i.value);
  }
  var inputsValidation = function (i) {
    return i.value.length > 0;
  }

  var condition1 = $emails.every(emailsValidation);
  var condition2 = $required.every(inputsValidation);
  return condition1 && condition2;
}

function validateEmail(email) {
  return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <form class="with-validation">
        <input name="lastname" class="required" type="text"></input>
        <input name="firstname" type="text"></input>
        <input name="phone" class="required" type="text"></input>
        <input name="email" class="required email" type="text"></input>
        <input name="confEmail" class="required email" type="text"></input>
        <button class="submit-btn" type="submit">OK</button>
    </form>
</body>

关于javascript - 循环遍历 jQuery 对象并评估条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42363943/

相关文章:

javascript - 当用户打开新选项卡时暂停应用程序 (AngularJS)

javascript - 是否有任何可公开访问的 JSON 数据源来测试真实世界的数据?

javascript - 如何收集对话框的值

javascript - ng-checked 在 AngularJS 中不起作用

javascript - 如何使用 JS/Jquery 单击同一个按钮来重复 html 代码 10 次?

javascript - 在 .closest ('tr' 中的单元格内选择不同类型的输入

javascript - 无法通过 JavaScript 调用淡入淡出 div

Jquery Ajax 抛出错误 406——在 Spring MVC 中 Not Acceptable

javascript - $_POST 没有从 jQuery.post 填充的表单中提取值

javascript - 带有复选框的表 tr td,如果没有选中复选框,则应用父 tr 类