javascript - 验证功能，并通过对象循环以找到更好的性能

Question

我有一个进行验证的验证函数，到目前为止，下面的代码可以满足我的要求，传入所有 $('.required') 类，然后遍历它们以检查它们的每个值。如果它们都不等于空字符串，则在所有字段至少有一个字符后启用下一个按钮。

只是好奇是否有更好的方法来完成相同的任务，或者如果有人有任何速度性能增强也会非常感谢！

validate : function (requiredArray) {
            var valueObj = {};
            for(var i = 0; i < requiredArray.length; i++) {
                valueObj[i] = 'input#'+requiredArray[i].id;
                $(valueObj[i]).on("keyup mouseup", function (e) {
                    for (var j = 0; j < Object.keys(valueObj).length; j++) {
                        if($(valueObj[j]).val() !== '') {
                            $('.btn-success.nextButton').removeClass('disabled');
                        } else {
                            $('.btn-success.nextButton').addClass('disabled');
                            return;
                        }
                    }
                });
            }
        }

Answer 1

如果您对所有输入使用通用类required，则可以尝试以下操作：

validate: function() {
  var $inputs = $('input.required'),
      $button = $('.btn-success.nextButton'),
      hasEmpty = $inputs.filter(function(){ return !this.value; }).length;

  $inputs.on('keyup mouseup', function() {
    if (hasEmpty) return false;
    $button.removeClass('disabled');
  });
}

我不确定您的结构是什么，但您应该将事件与验证逻辑分开，例如：   

var $inputs = $('input.required'),
    $button = $('.btn-success.nextButton');

function validate() {   
  return $inputs.filter(function(){ return !this.value; }).length;  
}    

$inputs.on('keyup mouseup', function() {   
  if (!validate()) return false;   
  $button.removeClass('disabled');  
});

id应该谨慎使用，类更方便。

Answer 2

这就是我让它工作的方式：

$inputs.on('keyup mouseup', function() {  
    if (CMS.validate()) {
        $('.btn-success.nextButton').addClass('disabled');  
        return false; 
    }   
    $('.btn-success.nextButton').removeClass('disabled');  
        });