Google Chrome出现HTML banner警告，新手开发者如何禁用该警告横幅

该提示为Chrome自带的HTML5表单验证提示，输入标签设置required、pattern、minlength等验证属性后，输入内容不符合规则时就会触发该横幅。

相关输入代码如下：

<input
  class="input-name"
  pattern="[a-zA-Zა-ჰ]+"
  type="text"
  placeholder="სახელი"
  minlength="3"
  maxlength="255"
  required
/>

可根据需求选择以下方案处理：

• 方案1：禁用整个表单的默认验证
  如果不需要浏览器自带的表单验证逻辑，可以直接在form标签上添加novalidate属性，即可全局关闭默认验证提示：

<form novalidate>
  <!-- 输入标签放置在此处 -->
</form>

• 方案2：仅禁用指定输入框的默认提示，保留验证能力
  如果需要自行实现自定义验证逻辑，不想触发默认提示，可以为对应输入框绑定invalid事件，阻止默认行为即可：

const nameInput = document.querySelector('.input-name')
nameInput.addEventListener('invalid', (e) => {
  e.preventDefault()
  // 此处可添加自定义验证提示逻辑
})

• 方案3：修改默认提示文本（不隐藏横幅仅替换内容）
  如果不需要隐藏横幅，只是想调整提示内容，可以用setCustomValidity方法自定义提示文本：

const nameInput = document.querySelector('.input-name')
nameInput.addEventListener('input', () => {
  nameInput.setCustomValidity('') // 先清除之前的自定义提示
})
nameInput.addEventListener('invalid', () => {
  nameInput.setCustomValidity('请输入符合规则的内容，仅支持字母且长度不小于3位')
})

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