浏览器原生表单不支持跨输入框唯一性校验，必须用javascript手动监听blur和submit事件，通过setcustomvalidity与reportvalidity实现校验，动态新增input需及时绑定事件，旧浏览器应回退至样式标记与自定义提示。
多个 input 共享同一组值时，怎么阻止重复提交
直接结论：浏览器原生表单不支持跨输入框的唯一性校验，必须用 JavaScript 手动监听 + 对比。不能只靠 required 或 pattern 解决。
典型场景是动态增删的联系人列表、多邮箱注册、批量添加标签等——每个 input 看似独立，但业务要求它们的值互不相同。
- 别指望
name相同就能自动去重；同名只会让后端收到数组，前端校验仍需自己做 - 校验时机建议选在「失焦（
blur）」和「提交前（submit）」两个节点，兼顾体验与兜底 - 注意区分大小写：邮箱通常应忽略大小写比对，而密码重填则必须严格区分
addEventListener('blur') 怎么实时标记重复项
给每个新插入的 input 绑定 blur 事件，在触发时遍历所有同类 input，找出值相同且非自身的元素。
示例逻辑（假设所有待校验输入框 class 为 unique-input）：
document.querySelectorAll('.unique-input').forEach(input => {
input.addEventListener('blur', function() {
const value = this.value.trim();
if (!value) return;
const duplicates = Array.from(
document.querySelectorAll('.unique-input')
).filter(el => el !== this && el.value.trim().toLowerCase() === value.toLowerCase());
this.setCustomValidity(duplicates.length ? '该值已存在' : '');
this.reportValidity(); // 触发浏览器原生提示
});
});
-
setCustomValidity是关键，空字符串表示通过，非空则阻断提交并显示提示 - 务必用
reportValidity()主动触发校验，否则blur下不会弹出气泡 - 动态新增的
input必须在插入 DOM 后立即绑定事件，不能只靠初始遍历
提交时全量校验为什么比单个 blur 更可靠
blur 容易被绕过：用户快速切换输入框、粘贴后未失焦、或用键盘 Tab 跳过某个框，都可能导致状态不同步。提交前再扫一遍更稳妥。
- 在
form.addEventListener('submit', e => {...})中重新收集全部值，用Set去重比长度 - 不要只检查「有没有重复」，要定位到具体哪个
input违规，方便聚焦和提示 - 若使用了
disabled或readonly的输入框，记得过滤掉，避免误判 - 性能无压力：100 个输入框内遍历一次，耗时远低于 1ms
IE11 兼容或旧版 Safari 下 setCustomValidity 失效怎么办
老浏览器对 setCustomValidity 支持不稳定，尤其配合 reportValidity() 时容易静默失败。此时应回退到手动样式标记 + 自定义提示。
- 给重复项加
class="error"，CSS 控制红边框 / 背景色 - 用
title属性或旁边插入<span class="error-msg"></span>显示文字 - 提交时
e.preventDefault()并滚动到第一个错误项：inputs[0].scrollIntoView({ behavior: 'smooth' }) - 避免依赖
checkValidity()返回值，改用纯 JS 判断逻辑
真正麻烦的不是写法，而是“重复”本身的语义模糊——是整个页面唯一？还是仅当前表单块内唯一？是否允许空值互斥？这些边界得在写校验逻辑前就和产品对齐清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
