javascript - 多个input输入框，val值重复验证-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

高洛峰 2017-04-11 12:34:21

[JavaScript讨论组]

393

有多个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值是一样的，就没法验证了。

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(2)

高洛峰2017-04-11 12:36:21 2楼

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

那么关键的步骤就是在缓存中检索这个步骤，最简单的思路当然是遍历，自己写循环来处理。如果利用集合值唯一性这个特点，使用集合来处理会更容易一些。现在问题来了，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;
    }
}