如何在不删除INPUT标签pattern属性的前提下关闭其校验报错提示

以下两种方案均不会删除pattern属性，可完全隐藏原生校验报错气泡，无任何额外页面空间占用： #

方案1：针对性屏蔽指定输入框的原生提示（推荐） #

原理是监听输入框的invalid事件，阻止浏览器触发默认的气泡提示行为，对其他表单元素的原生校验逻辑无影响。

行内绑定写法（适合单个输入框） #

直接在你的现有input标签上添加oninvalid事件即可：

<input title="" pattern="ABC|ABQ|ABW" type="text" name="CODES" oninvalid="event.preventDefault()">

JS批量绑定写法（适合多个带pattern的输入框） #

// 选中所有带pattern属性的输入框统一绑定事件
document.querySelectorAll('input[pattern]').forEach(input => {
  input.addEventListener('invalid', e => {
    // 阻止默认的报错气泡弹出
    e.preventDefault()
  })
})

说明：该方案仅屏蔽原生提示，pattern属性规则仍可正常使用，你可以通过input.validity.patternMismatch主动获取当前输入是否匹配规则，方便后续自定义校验提示的实现。

方案2：全局屏蔽整个表单的原生校验提示 #

如果你的表单所有原生校验提示都不需要展示，可以直接在<form>标签上添加novalidate属性，所有表单元素的原生校验提示都会被关闭，pattern属性依然保留生效：

<form novalidate>
  <!-- 你的原有input代码不需要修改 -->
  <input title="" pattern="ABC|ABQ|ABW" type="text" name="CODES">
</form>

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