如何禁用HTML输入框默认验证提示并设置红色边框？

要替换浏览器默认的空输入验证提示，改成红色边框，可通过两种方式实现：

方式一：基于原生验证事件自定义样式 #

保留输入框的required属性，通过事件阻止默认弹窗并添加错误样式：

1. 添加JavaScript逻辑：

const emailInput = document.getElementById('email');

// 触发验证错误时，阻止默认提示并添加样式类
emailInput.addEventListener('invalid', function(e) {
  e.preventDefault();
  this.classList.add('input-error');
});

// 输入内容时移除错误样式
emailInput.addEventListener('input', function() {
  this.classList.remove('input-error');
});

2. 编写CSS错误样式：

.input-error {
  border: 2px solid red;
}

/* 移除部分浏览器自带的invalid默认阴影/边框 */
input:invalid {
  box-shadow: none;
}

方式二：禁用原生验证，手动实现逻辑 #

给表单添加novalidate属性完全关闭浏览器默认验证，自己控制验证流程：

1. 修改HTML（假设输入框在表单内）：

<form novalidate>
  <div class="input-group" id="email-input">
    <input type="text" id="email" name="email" autocomplete="off" required placeholder="Email">
  </div>
  <button type="submit">提交</button>
</form>

2. 添加JavaScript验证逻辑：

const form = document.querySelector('form');
const emailInput = document.getElementById('email');

form.addEventListener('submit', function(e) {
  emailInput.classList.remove('input-error');
  
  // 判断输入是否为空
  if (!emailInput.value.trim()) {
    e.preventDefault(); // 阻止表单提交
    emailInput.classList.add('input-error');
  }
});

// 输入时清除错误样式
emailInput.addEventListener('input', function() {
  this.classList.remove('input-error');
});

3. 同样添加CSS样式：

.input-error {
  border: 2px solid red;
}

注意事项 #

• 如果现有样式优先级较高，可给.input-error加上!important或提高选择器权重（比如#email.input-error）。
• 现代浏览器支持:user-invalid伪类，也可直接用input:user-invalid { border: 2px solid red; }替代类名方式，但兼容性稍差。

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