HTML表单怎么校验连续相同字符输入-html教程-PHP中文网

html5 pattern属性可拦截连续重复字符，正则^(?!(.)\1{2})[a-za-z0-9]*匹配不含3个及以上连续相同字符的字符串；js需用/(.)\1{2,}/检测并调用setcustomvalidity控制校验状态。

html表单怎么校验连续相同字符输入

用 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()：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

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]