HTML5 pattern属性可拦截连续重复字符，正则^(?!(.)\1{2})[a-zA-Z0-9]*匹配不含3个及以上连续相同字符的字符串；JS需用/(.)\1{2,}/检测并调用setCustomValidity控制校验状态。
用 pattern 属性限制连续重复字符最简单
HTML5 的 pattern 属性可以直接在输入框上拦截连续相同字符（如 "aaaa"、"1111"），无需 JS 就能触发原生校验提示。关键在于正则表达式要匹配“至少 3 个连续相同字符”，然后用 ^ 和 $ 锚定整段输入，再取反逻辑——即让 pattern **不匹配**非法串，从而通过校验。
比如禁止 3 个及以上连续相同字母或数字：
<input type="text" pattern="^(?!(.)\1{2})[a-zA-Z0-9]*$" title="不能有3个及以上连续相同字符">
-
(.)\1{2}表示“任意一个字符，后面紧跟着两个相同字符”，即共 3 个连续相同 -
?!是负向先行断言，整个 pattern 只有在**不满足该条件时才通过** -
[a-zA-Z0-9]*允许空或任意组合的字母数字（可按需替换为更严格的字符集） - 必须加
title，否则 Chrome 等浏览器不会显示自定义提示
JavaScript 实时检测并动态设错误状态
仅靠 pattern 无法覆盖所有场景：比如用户粘贴文本、移动端软键盘回车跳过 blur、或需要高亮具体违规位置。这时要用 Constraint Validation API 配合 JS 主动控制。
核心是监听 input 或 blur，用正则检测连续重复，再调用 setCustomValidity()：
立即学习“前端免费学习笔记（深入）”；
const input = document.getElementById('username');
input.addEventListener('blur', () => {
const hasRepeat = /(.)\1{2,}/.test(input.value);
if (hasRepeat) {
input.setCustomValidity('不能包含3个及以上连续相同字符');
} else {
input.setCustomValidity(''); // 清空！否则错误残留
}
});
- 正则
/(.)\1{2,}/比pattern中的更宽松，能捕获 ≥3 连续（{2,}表示“至少再重复 2 次”） - 必须在每次校验后都调用
setCustomValidity('')，哪怕没出错——否则上次失败会一直阻塞提交 - 不要只监听
input：频繁触发易卡顿，且用户可能跳过（如直接点提交按钮）；blur+submit更稳妥
为什么不能只靠 oninput 实时比对
连续字符校验不像密码一致性，它对输入节奏干扰更大：用户刚敲下 "aaa"，还没来得及补全就立刻报错，红框闪现、提示弹出，体验极差。
- 防抖（
setTimeout延迟 300ms）能缓解，但无法解决粘贴、选中替换等操作带来的漏检 - 移动端软键盘收起时，
blur不一定触发，建议同时监听change事件作为补充 - 真正关键的校验时机是
submit：必须在此处重新执行检测，不能信任blur的缓存结果——用户可能用 DevTools 改 DOM 绕过前端
兼容性与边界情况要注意
不同浏览器对 pattern 的支持和提示行为略有差异，尤其在非拉丁字符或 Unicode 字符（如中文、emoji）场景下容易误判。
- 中文连续重复（如
"你好你好"）不算“连续相同字符”，但"哈哈哈哈"会触发——因为是同一汉字重复 - 若需支持中文，正则应改为
/(\p{L}|\p{N})\1{2,}/u（带u标志），但pattern不支持 Unicode 属性转义，只能靠 JS 实现 - 空格、换行、制表符默认不被
[a-zA-Z0-9]匹配，如果允许输入这些，需显式加入字符类，例如[a-zA-Z0-9\s]，但注意\s在pattern中可能不被所有浏览器识别，稳妥做法是写成[a-zA-Z0-9 \t\n\r]
最不可靠的是依赖视觉反馈来代替校验逻辑——比如只加 CSS 类却不调用 setCustomValidity，表单仍会绕过验证直接提交。
