javascript - return false 在 javascript 对象中不起作用

Question

我得到了 2 个警报()；并尝试使用“return false”并期望它会起作用。

$(function() {
  var options = ['mandatory', 'email'];
  var validation_event = {
    mandatory: function(that) {
      if (!$(that).val() && $(that).data('placeholder')) {
        alert('Please fill in ' + $(that).data('placeholder') + '.');
        return false; // this is not working? I want to alert only one alert
      }
    }
  }

  function init() {
    $('input,select,textarea').each(function() {
      var self = $(this);

      $.each(options, function(i, val) {
        var attr = self.attr(val); // option array
        if (typeof attr !== typeof undefined && attr !== false) {
          validation_event[val](self);
        }
      });
    });
  }

  $('#submit').click(function(e) {
    e.preventDefault();
    init();
  })

})

试图编写一个我每次都可以重用的验证逻辑。

https://jsfiddle.net/m5jsscp7/

Answer 1

问题是，即使您从验证函数返回 false，每个循环也会继续运行。

如果验证失败，您可以从每个处理程序返回 false 以跳过进一步的执行，例如

$(function() {
  var options = ['mandatory', 'email'];
  var validation_event = {
    mandatory: function(that) {
      if (!$(that).val() && $(that).data('placeholder')) {
        alert('Please fill in ' + $(that).data('placeholder') + '.');
        return false; // this is not working? I want to alert only one alert
      }
      return true;
    },
    email: function() {
      return true;
    }
  }

  function init() {
    var valid = true;
    $('input,select,textarea').each(function() {
      var self = $(this);

      $.each(options, function(i, val) {
        var attr = self.attr(val); // option array
        if (typeof attr !== typeof undefined && attr !== false) {
          valid = validation_event[val](self) && valid;
        }
        return valid;
      });
    return valid;
    });
    return valid;
  }

  $('#submit').click(function(e) {
    e.preventDefault();
    console.log(init());
  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" id="fname" mandatory data-placeholder="First Name">
<input data-placeholder="Email Address" type="text" id="email" mandatory email name="email" value="">
<button id="submit">Submit</button>