生物识别失败次数必须由javascript主动维护，html无法自动计数；需在navigator.credentials.get的catch中过滤notreadableerror和unknownerror递增计数，并动态更新ui提示。
HTML 本身无法记录或计数生物识别失败次数
浏览器的 Web Authentication API（navigator.credentials.get）不向页面暴露“第几次失败”这类状态。HTML 是静态标记语言，没有运行时状态存储能力，更不会自动累积错误次数。
所谓“失败次数提示”，必须由 JavaScript 主动维护计数逻辑，并配合 UI 更新。常见错误是把 <input type="password"> 或表单提交失败误当作生物识别失败——这两者完全无关。
- 生物识别调用失败通常抛出
NotAllowedError、NotReadableError或SecurityError，不是 HTTP 状态码或表单验证错误 - 计数必须在 JS 层初始化变量（如
let bioFailCount = 0），并在catch块中递增 - 不能依赖 localStorage 持久化该计数——跨域、隐私模式、清除缓存都会导致丢失；如需长期统计，必须走服务端日志
如何在调用 navigator.credentials.get 后正确计数失败
失败计数必须绑定在认证流程的 Promise 链末端，且区分「用户拒绝」和「系统不可用」。例如用户点“取消”弹窗，属于主动拒绝，不应计入连续失败；但连续三次指纹校验失败，才应触发提示。
实操建议：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 只在
catch中处理DOMException，过滤掉"NotAllowedError"（用户取消）和"NotFoundError"（无可用凭证），重点关注"NotReadableError"（传感器故障）和"UnknownError"（校验未通过） - 使用闭包或模块级变量保存计数，避免全局污染：
const authTracker = { failCount: 0 } - 每次失败后检查
authTracker.failCount >= 3，再更新 DOM 中某个<span id="bio-fail-hint"></span>的文本
navigator.credentials.get({ publicKey })
.catch(err => {
if (['NotReadableError', 'UnknownError'].includes(err.name)) {
authTracker.failCount++;
document.getElementById('bio-fail-hint').textContent =
`生物识别失败 ${authTracker.failCount} 次`;
}
});
为什么不能用 form.onsubmit 或 input.addEventListener 拦截生物识别失败
WebAuthn 流程完全脱离表单生命周期。它由浏览器原生弹窗驱动，不触发任何表单事件，也不经过 input 元素。试图监听 submit 或 change 来捕获失败，结果一定是静默失效。
典型误操作：
- 给按钮加
type="submit"并监听表单 submit —— 生物识别调用在 click 里已发出，submit 根本不会执行 - 监听
<input id="bio-trigger">的 focus/blur —— 这些事件和认证成功与否毫无关系 - 把失败计数逻辑写在按钮
onclick里但没包裹在 Promise 中 —— 计数会立即执行，而非等失败发生后
移动端 Safari 和 Android Chrome 的兼容性差异影响计数可靠性
iOS 16.4+ 才支持 publicKey 选项中的 retryTimeout 和失败回调细化，旧版 Safari 会把所有失败统一抛 UnknownError，无法区分是用户拒还是传感器问题。Android Chrome 则可能因厂商定制 ROM 导致 NotReadableError 触发时机不稳定。
因此：
- 不要依赖错误名做精确分支，优先用计数 + 时间窗口（如 5 分钟内连续失败 3 次）来判断是否提示
- 在 iOS 上避免对
err.message做字符串匹配（内容不可靠），只认err.name - 测试时务必在真机上验证：模拟器常返回假成功，掩盖真实失败路径
SecurityError（HTTPS 缺失）当成用户操作失败来计数，结果在开发环境反复触发提示。这类错误应该直接阻断流程并引导用户检查地址栏，而不是累加失败次数。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
