javascript - 多个input输入框，val值重复验证

问题描述

问 题

有多个input输入框，我想验证提交的时候这些input是否会有重复的val值
我是这样做的，

  $websiteModal.on('blur', 'input[type=url]', function () {
    var $input = $websiteModal.find('input[type=url]');
    var i;
    for (i = 0; i < $input.length; i++) {
      if ($input.eq(i).val() === $input.eq(i + 1).val()) {
        $input.eq(i).addClass('error');
        $input.eq(i + 1).addClass('error');
        $.Alert.error('您填写的网站有重复，请核对后在提交');
        return;
      }
    }
  });

但是这样有两个问题，1、如果多三个重复地址；2、如果是第一个input和第三个input的val值是一样的，就没法验证了。

解决方案

验证重复的典型思路是：创建一个缓存，将所有值逐个与缓存中当前的所有值进行比较，如果没有找到，则加入缓存，否则丢弃。

那么关键的步骤就是在缓存中检索这个步骤，最简单的思路当然是遍历，自己写循环来处理。如果利用集合值唯一性这个特点，使用集合来处理会更容易一些。现在问题来了，ES5 是没有集合的，这时候可以用哈希表来代替集合，因为哈希表的键也具有唯一性，值嘛，随便给一个就是了，反正不用。JS的对象就是哈希表实现，限制是值只能是字符串。所以如果你的值是字符串，或者转成字符串之后能与原值唯一对应，就可以用这个办法，示例：

var all = $input.map(function() { return $(this).val(); }).toArray();
var map = {};
for (var i = 0; i < all.length; i++) {
    var v = all[i];
    if (map[v]) {
        alert("重复");
        return;
    } else {
        map[v] = true;
    }
}

刚才说了典型思路，现在再来说一下另一种思路，就是先排序，再从第2个（序号1）开始逐个与前一个比较，如果一样，则说明有重复

var all = $input.map(function() { return $(this).val(); }).toArray().sort();

for (var i = 1; i < all.length; i++) {
    if (all[i] === all[i - 1]) {
        alert("重复");
        return;
    }
}

这篇关于javascript - 多个input输入框，val值重复验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！