pattern校验失败时无提示，因未设title属性；浏览器默认提示“请与所要求的格式匹配”，用户不知错因；需配具体title文案，并在input事件中调用setCustomValidity("")清空残留状态。
pattern 属性校验失败时为什么没提示
HTML 的 pattern 属性本身不提供主动反馈：验证失败只会阻止表单提交，但不会高亮、弹窗或显示错误文案——除非你显式设置了 title 属性。没设 title 时，Chrome 和 Firefox 默认提示是“请与所要求的格式匹配”，用户根本不知道哪里错了。
常见错误现象：
- 用户输错后点击提交，页面无反应或只闪一下空白弹窗
- 改完内容再点提交，仍报错 —— 因为
input.validity.valid状态未重置 - 移动端（尤其是 Safari）完全不显示
title提示，形同失效
实操建议：
- 每个带
pattern的<input>必须配title，且内容要具体，比如title="请输入6位数字，不要加空格" - 在
input或blur事件中调用setCustomValidity("")清空旧错误，避免残留 - 需要强反馈时，手动调用
reportValidity()触发浏览器原生校验气泡（注意：它只对required或pattern生效）
JavaScript test() 校验失败后如何清空输入值
用 test() 做实时过滤（比如只允许数字），失败后直接清空 value 是最简单做法，但容易误伤——比如用户刚输个 "1"，还没来得及输 "12" 就被清空了。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是保留合法前缀，而非一刀切清空：
- 对数字类输入（如金额、电话），推荐用
input事件 + 正则替换非法字符：el.value = el.value.replace(/[^0-9\-\.]/g, '') - 若必须清空，别只在
change里做，否则粘贴一串乱码后用户还得手动删；改用input事件，并加防抖（setTimeout延迟 100ms）避免卡顿 - 清空前先
el.select()，让用户能立刻重输，而不是光标停在末尾
示例（只留数字和小数点）：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
el.addEventListener('input', () => {
const cleaned = el.value.replace(/[^0-9.]/g, '');
if (cleaned !== el.value) el.value = cleaned;
});
正则写错导致 pattern 完全失效的典型表现
不是“匹配不准”，而是“完全不校验”：任何输入（包括空值、字母、超长数字）都通过。根本原因通常是 HTML 的 pattern 字符串语法错误，浏览器静默忽略该属性。
高频踩坑点：
-
pattern="/^[0-9]{6}$/"→ 斜杠被当作文本，整个变成字面匹配，永远失败 -
pattern="[a-z-0-9]"→ 连字符-在中间，v 模式下解析为非法范围，直接跳过校验 -
pattern="d{6}"→ 缺少反斜杠，d被当作文本字符，不是数字类 - 用了 JS 特有语法，比如
(?=...)（环视），Safari 14 以下直接不支持
验证是否生效的最快方法：
- 打开 DevTools，在 Console 输入
document.querySelector('input').validity.valid，输错内容后看是否为false - 临时加
required，空着提交，看是否触发默认提示（如果没提示，说明pattern已失效）
表格单元格校验失败后怎么高亮
表格里用 background-color 高亮失败单元格，大概率失效——因为 border-collapse: collapse 下，td 的背景会被 table 或 tr 的背景盖住，尤其开了隔行变色后更明显。
实操建议：
- 统一用
border高亮：.invalid-cell { border: 2px solid #f44336 !important; } - 别靠事件监听每个
td，而是把校验逻辑绑定到数据层：校验函数接收rowIndex和cellIndex，再操作table.rows[rowIndex].cells[cellIndex] - 服务端返回字段级错误时，确保它的
row和col是 0 起始整数，且和 DOM 中rows[i].cells[j]严格对齐
关键细节：校验通过后必须手动移除 invalid-cell 类，否则错误状态会一直残留。
