这个问题我之前也碰到过！Chrome的原生表单验证确实有这个小坑——它会在你每输入一个字符后就重新检查pattern规则，导致错误Tooltip反复弹出又消失，看起来就是闪烁个不停。下面给你两个靠谱的解决方案：

解决方案1：禁用自动验证，手动控制验证时机 #

这是最稳妥的办法，完全掌握验证的触发时机，避免浏览器的“过度热心”。

1. 给表单加上novalidate属性，告诉浏览器不要自动做实时验证：

<form novalidate>
  <input type="text" pattern="\d{4,}" title="请输入至少4位数字">
  <button type="submit">提交</button>
</form>

2. 用JavaScript监听表单的提交事件，只在用户点击提交时才触发验证：

const form = document.querySelector('form');
const input = form.querySelector('input');

form.addEventListener('submit', (e) => {
  // 检查输入是否合法
  if (!input.checkValidity()) {
    e.preventDefault(); // 阻止表单提交
    input.reportValidity(); // 手动弹出原生错误Tooltip
  }
});

// 输入过程中清除错误状态，避免残留提示
input.addEventListener('input', () => {
  input.setCustomValidity('');
});

这样一来，只有用户点击提交时才会验证并显示错误提示，输入过程中不会再触发验证，Tooltip自然就不会闪烁了。

解决方案2：通过CSS限制错误提示的显示时机（可选） #

如果你不想完全禁用原生自动验证，也可以尝试用CSS来隐藏输入过程中的invalid状态样式，但这种方法对原生Tooltip的控制有限，因为Tooltip是浏览器原生控件，CSS不一定能完全覆盖：

/* 只有当输入框失去焦点，且用户已经触发过验证时，才显示invalid相关样式 */
input:not(:focus):invalid {
  border-color: #dc3545; /* 自定义错误边框样式 */
}

不过这种方法不如第一种可靠，因为Chrome的实时验证逻辑还是会运行，Tooltip可能还是会偶尔闪烁，所以更推荐第一种方案。

内容的提问来源于stack exchange，提问作者acidernt