检查数组中的所有值是否相同

Question

我有一个网页，其中包含一个文本框。

当用户输入信息时，它会发起 AJAX 调用以查看该条目是否有效，如果无效，则禁用按钮。

他们还可以通过 jQuery 模板添加多达 10 个文本框。目前，每个文本框都有一个序列类，当序列文本框失去焦点时，它会进行此检查。

如果他们输入无效的序列号，则会禁用按钮，但如果他们添加了一个新的文本框，并且该文本框是有效的，则现在启用了该按钮，这是错误的，因为仍然有一个无效的。

我唯一能想到的方法是为每个文本框添加一个 1 或 0 到数组中，一旦数组中的所有元素都为 1，则启用按钮。这是一个好的方法吗？如果不是，请解释更好的方法。如果是一个好的方法，如何检查 JavaScript 数组中的所有值是否相同？

谢谢

- Jon

---

你能澄清一下“当串行文本框失去焦点时”这句话的意思吗？ - Charles Goodwin

@Charles 当文本框触发模糊事件时... - Šime Vidas

是的，这样做可以。我认为将0和1设置为每个文本框的状态进行检查，并且您必须循环 JavaScript 数组以找出哪个是 0 或 1。 - Khurram Ijaz

Answer 1

这听起来是一个不错的方法。你可以使用这个简单的javascript函数来检查javascript数组中是否有相等的元素。你可以将它粘贴到firebug控制台中以检查其功能性。

// check if all elements of my_array are equal, my_array needs to be an array
function check_for_equal_array_elements(my_array){
  if (my_array.length == 1 || my_array.length == 0) {
     return true;
  }
  for (i=0;i<my_array.length;i++){
     if (i > 0 && my_array[i] != my_array[i-1]) {
       return false;
     }
  }
  return true;
}

//Example:
var my_array = [];
my_array.push(5);
my_array.push(5);

// will alert "true"
alert("all elements equal? "+check_for_equal_array_elements(my_array));

my_array.push(6);
// will alert "false"
alert("all elements equal? "+check_for_equal_array_elements(my_array));

- Thariama

Answer 2

我假设你已经有一个返回布尔值的isValid(str)函数。

既然你使用了jQuery，你可以利用jQuery的filter()函数，在任何输入框失去焦点时轻松检查是否有无效输入：

$('.serial').live('blur', function () {

    // Get an array of all invalid inputs
    var invalids = $('.serial').filter(function () {
        return !isValid($(this).val());
    });

    // Does the array contain anything?
    $('#button').prop('disabled', invalids.length);

});

示例：http://jsfiddle.net/3RNV6/

---

相似的概念，但用于与AJAX一起使用：

$('.serial').live('blur', function () {
    var me = this;

    $.ajax({
       // ajax config
       success: function (data) {
           if (data === 'Y') $(me).addClass('valid');

           // Get an array of all invalid inputs
           var invalids = $('.serial').filter(function () {
               return !$(this).hasClass('valid');
           });

           // Enable if none invalid
           if (invalids.length === 0) $('#button').prop('disabled', false);
       }
    });
});

$('.serial').live('keypress', function () {
    $('#button').prop('disabled', true);
    $(this).removeClass('valid');
});        

- David Tang

---

@Jon，抱歉我错过了 AJAX 的要求。在这种情况下，您必须在“更改”时禁用按钮并删除“valid”类。当 AJAX 请求返回时，还要将“valid”类添加到输入中。完成后，只需从筛选函数返回 $(this).hasClass('valid') 即可。 - David Tang

在success方法中，如何获取发起AJAX调用的文本框的引用以执行addClass("valid")操作？ - Jon

谢谢你将它从change改为了keypress。有什么原因吗？我还必须使用attr而不是prop。由于某种原因，最新的jQuery会破坏我的页面。 - Jon

@Jon，change和keypress都可以使用-这取决于您希望禁用的响应速度。 keypress将导致按钮在输入字符时立即被禁用，而change将等待文本框失去焦点。 attr在最新版本中也完全可以使用。 - David Tang

由于某些原因，即使文本框具有有效的类，无效数组也会被填充。这是我的代码-https://gist.github.com/1014279 - Jon

Answer 3

首先，如果您动态创建了n个文本框，则应该使用jQuery的live()或delegate()方法来通知添加新的DOM元素。

其次，您的方法很好，但是您可以设置输入参数中带有错误文本的param，然后如果存在任何带有错误文本的元素，则禁用按钮。 我认为这比一直循环所有文本框要快。

- eugeneK

Answer 4

我会使用验证来实现这个。

http://docs.jquery.com/Plugins/Validation#Demos

如果您能够在客户端进行验证，那就太好了——可以使用上面链接中显示的现有jQuery验证函数之一，或编写自己的验证函数。

如果必须通过ajax在服务器端进行验证，则可以将其构建到自定义验证程序中。

然后，在显示/隐藏按钮的调用中，调用$('#formid).validate()——如果任何验证失败，则返回false。

- BonyT